什麼時候Angular2中的組件元數據需要指令？

Question

在角教程這裏找到： https://angular.io/docs/ts/latest/tutorial/toh-pt3.html

的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？

Answer 1

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

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

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

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

我希望這可以幫助