可重用组件/指令 ng2答案

【问题标题】：Reuseable Components / Directives ng2可重用组件/指令 ng2
【发布时间】：2016-08-08 15:48:27
【问题描述】：

我有一个这样的导航组件：

import {Component} from '@angular/core';

const template = require('./navigation.jade');
const styles = require('./navigation.sass');

@Component({
    selector: 'navigation',
    templateUrl: template,
    styleUrls: [styles]
})

export class NavComponent {

 }

我不想手动将其添加到每个页面的开头，而是将其包含在我的 app.component.ts 文件中。

目前我的实现方式如下：

import {Component, ViewEncapsulation} from '@angular/core';
import {ROUTER_DIRECTIVES} from '@angular/router';

import {NavComponent} from './components/navigation/navigation.component';

const styles = require('./base-styles.sass');

@Component({
    selector: 'app',
    directives: [ROUTER_DIRECTIVES, NavComponent],
    encapsulation: ViewEncapsulation.None,
    styles: [styles],
    template: `
    <navigation></navigation>
    <div class="container">
<router-outlet></router-outlet>
    </div>`
})
export class AppComponent {
}

但是导入 Component 然后将其包含为 Directive 选择器感觉不对，我确定这是不正确的，我怎样才能最好地做到这一点？

如果我尝试将其转换为指令，则无法在模板文件中要求并将导航栏导入 DOM。

我是 ng 新手，热衷于学习最佳实践，这可能有效，但感觉有点“hacky...”

【问题讨论】：

这正是你的做法。随着下一个更新模块将被引入，您可以在其中为整个模块提供它。否则请参阅 stackoverflow.com/questions/37986768/… 和 stackoverflow.com/questions/37897005/…

标签： angular angular2-template

【解决方案1】：

您可以全局提供指令

provide({provide: PLATFORM_DIRECTIVES, useValue: [NavComponent], multi: true})

但总的来说，你做的方式是首选方式。

【讨论】：

非常感谢。

【解决方案2】：

像往常一样，Gunter 的评论是正确的 :) 导入和使用作为指令是正确的方法（如果您希望 nav 成为它自己的组件）。此外，如果您对所有 Angular 最佳实践感兴趣，angular.io 是您的理想去处。

【讨论】：