2016-02-07 111 views
1

我有2个部件为什么我的模板在angular2组件中不起作用?

第一

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

回答

3

您需要添加NavBardirectives属性:

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

随着Angular 2,你现在必须提供所有你想要你的component内访问组件的名称。了解更多关于他们在这里:Multiple Components

对于你的问题,因为@Thierry建议:

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

这取决于所使用的Angular2发布周期。在Angular2 RC6支持Directives里面@Component修饰符已被删除。 Directivespipes必须在@NgModule中定义。在这种情况下,应该在app.module.ts中定义它。

app.module.ts

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