什么时候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，因此无法在任何其他组件的模板中引用。

组件需要在其指令中定义通过其选择器在模板中引用的组件/指令。

我希望这可以帮助