为什么我的模板在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 {}