Question

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

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。

我是新手，并且热衷于只学习最佳实践，这可能会奏效，但感觉有点'hacky ......'

Answer 1

您可以全局提供指令

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

但一般来说，这样做是首选方式。

Answer 2

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

可重复使用的组件/指令ng2

2 个答案: