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

Question

在此处找到的 angular 教程中： https://angular.io/docs/ts/latest/tutorial/toh-pt3.html

HeroDetailComponent 作为指令添加到 app.component.ts:

@Component({
    selector: 'my-app',
    //...
    directives: [HeroDetailComponent]
})

教程说： "A browser ignores HTML tags and attributes that it doesn't recognize. So does Angular... We tell Angular about it (the HeroDetailComponent) by listing it in the metadata directives array."

但是在此处找到的工作示例中： 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> 只是定义了当您决定导航到它们时组件将显示的位置（在这种情况下发生执行代码 <a [routerLink]="['/product', product.productId]"> 存在于 product -list.component.html).

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

组件需要在其指令中定义 Components/Directive，这些指令在其模板中通过其选择器被引用。

希望对您有所帮助

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

When is a directive required in component metadata in Angular2?

angular2-directives

angular