Как использовать директивы в angular2

Question

Я хочу, чтобы загрузить мой navbar.html в моем app.component.html для этого я использовал директивы и follwed метод ниже,

мой Navbar 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> 

Это моя ситуация, и я не уверен, о том, как решить, может ли один предложить мне help.Thanks.

Answer 1

directives в @Component() ушла так некоторое время.

Теперь они должны быть в

@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

Answer 2

Ваш app.component

@Component({ // <--- removed directives 
    selector: 'my-app', 
    templateUrl: './app/components/app.component.html', 
    providers: [Config] 
}) 

Ваш app.module

import { Navbar } from '../navbar/navbar'; 
@NgModule({ 
    imports: [], 
    exports: [], 
    declarations: [Navbar], // <-- imported here 
    providers: [], 
})