angular - 如何在angular2中使用指令

Question

我想在我的 app.component.html 中加载我的 navbar.html 因为我使用指令并遵循以下方法，

我的导航栏 html，

<p>Hi i am a pen</p>

我的 navbar.ts，

 import {Component,Directive, OnInit} from '@angular/core';
    @Component({
    selector: 'header-Navbar',
    templateUrl: './app/navbar/navbar.html',
     })
    export class Navbar  {}

我的 app.component.html，

    <header-Navbar></header-Navbar>

我的 app.component.ts，

import {Component,Directive, OnInit} from '@angular/core';
import { FormGroup, FormControl, FormBuilder, Validators } from '@angular/forms';
import { Http, Headers } from '@angular/http';
import { Navbar }  from '../navbar/navbar';
import {PathLocationStrategy, LocationStrategy, Location} from '@angular/common';
import { Config } from '../headers';
@Component({
    selector: 'my-app',
    directives : [Navbar],---->Saying type error
    templateUrl: './app/components/app.component.html',
    providers: [Config]
})

我的错误，

   'header-Navbar' is not a known element:
1. If 'header-Navbar' is an Angular component, then verify that it is part of this module.
2. If 'header-Navbar' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("
        [ERROR ->]<header-Navbar></header-Navbar>

这是我的情况，我不确定如何解决它，任何人都可以建议我帮忙。谢谢。

Answer 1

@Component() 中的

directives 已经消失了一段时间。

现在他们应该在

@NgModule({
  declarations: [NavBar]
  ...
}
export class AppModule {} 
// or 
export class MyOtherModule {}

另见

• https://angular.io/docs/ts/latest/guide/ngmodule.html
• https://angular.io/docs/ts/latest/cookbook/ngmodule-faq.html