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 {}

但是在root（App）组件中没有显示navbar。我错过了什么？

Plunkr

Answer 1

您需要将NavBar添加到directives属性中：

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

Answer 2

这取决于使用Angular2的发布周期。 Angular2 RC6 Directives内部@Component内部对装饰器的支持已被删除。必须在Directives中定义pipes和@NgModule。在这种情况下，应该在app.module.ts中定义。

app.module.ts

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

Answer 3

使用Angular 2，您现在必须提供要在component内访问的所有组件的名称。在这里阅读更多相关信息：Multiple Components

对于你的问题，正如@Thierry建议的那样：

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

为什么我的模板在angular2组件中不起作用？

3 个答案: