У меня 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 {}

Но в корневом (приложении) компоненте не отображается панель навигации. Что мне не хватает?

Plunker

2
Slip 7 Фев 2016 в 11:43

3 ответа

Лучший ответ

Вам нужно добавить NavBar в атрибут directives:

@Component({
  selector: 'app'
  template: `<div class="col-md-12">
    <navbar></navbar>
    </div>`,
  directives: [ Navbar ]
})
3
Thierry Templier 7 Фев 2016 в 08:49

С Angular 2 теперь вы должны указать имена всех компонентов, к которым вы хотите получить доступ внутри вашего component. Подробнее о них читайте здесь: Несколько компонентов

По вашему вопросу, как предложил @Thierry:

@Component({
  selector: 'app'
  template: `<div class="col-md-12">
    <navbar></navbar>
    </div>`,
  directives: [ navbar ]
})
1
ashfaq.p 7 Фев 2016 в 08:53

Это зависит от того, какой цикл выпуска Angular2 используется. В Angular2 RC6 поддержка декоратора Directives внутри @Component была удалена. Directives и pipes должны быть определены в @NgModule. В этом случае он должен быть определен в app.module.ts.

App.module.ts

// imports...
@NgModule({
   declarations: [
   AppComponent,
   NavbarComponent
],
...
... 
})
export class AppModule {}
3
shaz 21 Ноя 2016 в 10:59