2016-05-13 91 views
2

在角教程這裏找到: https://angular.io/docs/ts/latest/tutorial/toh-pt3.html什麼時候Angular2中的組件元數據需要指令?

的HeroDetailComponent添加爲指令app.component.ts:

@Component({ 
    selector: 'my-app', 
    //... 
    directives: [HeroDetailComponent] 
}) 

的教程說: 「瀏覽器忽略HTML標籤和屬性它不能識別Angular也是這樣......我們通過將它列入到元數據指令數組中來告訴Angular它(HeroDetailComponent)。「

但是在工作示例這裏找到: https://github.com/DeborahK/Angular2-GettingStarted(見APM - 最後更新項目)

app.component.ts加載一個名爲ProductDetailComponent組件尚未有這方面沒有指令:

@Component({ 
    selector: 'pm-app', 
    //... 
    directives: [ROUTER_DIRECTIVES],  
}) 

爲什麼第二個示例能夠加載沒有ProductDetailComponent指令的ProductDetailComponent?

回答

1

從我所看到的,通過AppComponent進口<router-outlet>ProductDetailComponent使用它,因爲ProductDetailComponent@Routes定義。

這意味着<router-outlet>只定義其中各組分將當你決定導航到這些(在這種情況下,發生在產品list.component.html執行代碼<a [routerLink]="['/product', product.productId]">存在)被顯示。

ProductListComponent未定義任何selector,因此無法在任何其他組件的模板中引用。

組件需要在其指令中定義通過其選擇器在模板中引用的組件/指令。

我希望這可以幫助

+0

>>我希望這會有所幫助。它確實如此。謝謝。 – Sam

相關問題