angular - Angular2 的组件元数据何时需要指令？

Question

在此处找到的 Angular 教程中: 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.html 中的代码 <a [routerLink]="['/product', product.productId]">)。

ProductListComponent没有定义任何 selector因此不能在任何其他组件的模板中引用。

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

希望对你有帮助