2016-05-13 66 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