在此处找到的角度教程中：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？
从我所看到的，AppComponent进口的ProductDetailComponent，但使用它通过<router-outlet>自ProductDetailComponent定义在@Routes。
这意味着<router-outlet>仅定义当您决定导航至组件时将在何处显示这些组件（在这种情况下，将执行product-list.component.html中<a [routerLink]="['/product', product.productId]">存在的代码）。
ProductListComponent没有定义任何内容selector，因此无法在任何其他组件的模板中引用。
组件需要在其指令中定义组件/指令，该组件/指令通过其选择器在其模板内进行引用。
我希望这有帮助
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句