2016-05-13 78 views
4

我一直在看Angular 2上的一些教程。我对引导组件感到困惑。如果我想创建多个页面应用程序,并且不需要该根组件,那么我该怎么做呢?我看到它对单页面应用程序是如何工作的。引导角2

这是我的Main.Ts文件。

import { bootstrap } from 'angular2/platform/browser'; 

import { AppComponent } from './app.component'; 

bootstrap(AppComponent); 

这是我的app.component.ts文件。

import {Component} from 'angular2/core'; 

@Component({ 
    selector: 'pm-app', 
    template: '<h1>{{PageTitle}}</h1>' 
}) 
export class AppComponent { 
    PageTitle: string = "Test"; 

} 

如果我想定位到比我们说的index.html以外的页面,并将它加载不同的组件,而不带来的AppComponent,我怎么会去这样做?在Angular 1+中,这很容易,因为我只是引用了我想要使用的HTML页面上的控制器。我将如何参考我想在不同页面上使用的组件?

感谢。试图将我的头部缠绕角度2.

回答

2

某些组件始终必须是该根组件。

有没有必要它总是相同的组件。您也可以在一个页面引导多个组件,但每个Angular2应用一些元素开始,而这是与

@NgModel({ 
    ... 
    bootstrap: [AppComponent] 
}) 

该元素的视图可以包含其他元素和指令从而弥补了初始化的根组件整个应用。

+0

所以我应该引导我在main.ts所有组件文件?或者只是引导1,并以某种方式超载它与我所有的组件。这听起来不错。这是否意味着如果我在根组件中有10个其他组件,它将每个页面加载整个应用程序,或者只有它需要? – Dylan

+0

通常你有一个根组件构成了整个页面(这就是典型的Angular2应用程序的想象 - 当然还有其他变体),这个根组件的视图由其他组件组成,这些组件的视图也是其他组件的视图。您只需引导包装应用程序的组件。自动根据Angular实例化根组件视图中的组件。我不确定你的意思是“每页”。通常情况下,您使用路由器,根据活动路由,在应用程序 –

+0

内的特定标记元素处插入其他组件。 –

0

Angular 2在加载组件时非常好,这就是为什么它比angular 1快5倍。IT不会一次加载所有组件它只会将加载所需组件作为延迟加载的概念。对于动态加载,它使用Systemjs的功能,也可以使用Webpack。

Angular 2在设计上是模块化的,因此如果你的应用程序有很多模块。您可以创建多个模块并将所有模块绑定到单个根模块中。

然后您可以使用角度2路由功能。哪个加载所需的模块取决于用户点击哪个路线。

您可以了解从深路由从这里

https://angular.io/docs/ts/latest/guide/router.html