爲什麼我的模板在angular2組件中不起作用？

Question

我有2個部件

第一

import {Component} from 'angular2/angular2'; 
import {Navbar} from './navbar'; 
@Component({ 
    selector: 'app' 
    template: `<div class="col-md-12"> 
    <navbar></navbar> 
       </div>` 
}) 
export class App {} 

和第二

import {Component} from 'angular2/angular2'; 
@Component({ 
    selector: 'navbar', 
    template:`<p>Navbar</p>` 
}) 
export class Navbar {} 

但在根（應用程序）組件不顯示導航欄。我錯過了什麼？

Plunkr

Answer 1

您需要添加NavBar到directives屬性：

@Component({ 
    selector: 'app' 
    template: `<div class="col-md-12"> 
    <navbar></navbar> 
    </div>`, 
    directives: [ Navbar ] 
}) 

Answer 2

隨着Angular 2，你現在必須提供所有你想要你的component內訪問組件的名稱。瞭解更多關於他們在這裏：Multiple Components

對於你的問題，因爲@Thierry建議：

@Component({ 
    selector: 'app' 
    template: `<div class="col-md-12"> 
    <navbar></navbar> 
    </div>`, 
    directives: [ navbar ] 
}) 

Answer 3

這取決於所使用的Angular2發佈週期。在Angular2 RC6支持Directives裏面@Component修飾符已被刪除。 Directives和pipes必須在@NgModule中定義。在這種情況下，應該在app.module.ts中定義它。

app.module.ts

// imports... 
@NgModule({ 
    declarations: [ 
    AppComponent, 
    NavbarComponent 
], 
... 
... 
}) 
export class AppModule {}