typescript - 组件不渲染 Angular 2 Typescript

Question

我正在尝试学习 Angular 2，在出现大量错误消息后，我终于让路由正常工作，并且我可以显示我想要的组件。现在我想显示我的主页组件，我希望这个组件中有一个导航栏组件。

首页.ts:

import {Component, View} from 'angular2/core';
import {Navbar} from './navbar/navbar'

@Component({
  selector: 'home'
})

@View({
  templateUrl: '/app/home/home.html'
})

export class Home {

    constructor:(public navbar: Navbar) {
    }

}

主页.html:

<p>NICE!</p>
<navbar></navbar>

导航栏.ts:

import {Component, View} from 'angular2/core';

@Component({
  selector: 'navbar'
})

@View({
  template: `
  <ul>
    <li>This is the navbar</li>
  </ul>
  `
})

export class Navbar{
}

主页正在显示，但标签只是停留在<navbar></navbar>当我检查它时。我做错了什么？

Answer 1

如果你想要 navbar 组件，你需要将它添加到父组件的 directives 属性中，而不是在它的构造函数中，像这样:

@Component({
  selector: 'home',
  templateUrl: '/app/home/home.html',
  directives: [ Navbar ]
})
export class Home {
  constructor() {

  }
}