何时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导入ProductDetailComponent，但通过<router-outlet>使用它，因为ProductDetailComponent中定义了@Routes。

这意味着<router-outlet>只定义了当您决定导航到组件时将显示组件的位置（在这种情况下，会执行 product-list.component中存在的代码<a [routerLink]="['/product', product.productId]"> html的）。

ProductListComponent未定义任何selector，因此无法在任何其他组件的模板中引用。

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

我希望这会有所帮助