Компонент не отображается правильно

Question

Я создал плункер, чтобы показать, в чем проблема.

https://plnkr.co/edit/a7F616WCoKbSGXzlYGsM?p=preview

У меня есть компонент, я хочу использовать в другом компоненте, я импортировать его и добавить его в директивах: [] из компонента декоратора и не делает ...

компонент - list-list.component, его селектор - gb-line-list, и я пытаюсь использовать его в этом файле app/area-list.component.ts.

На первой странице отображается список областей, при нажатии на одну область, я хочу показать детали этой области со списком строк. Вот что список линии, не оказывающая ...

зонально detail.component.ts

import {Component, Input, OnInit} from 'angular2/core'; 
import {RouteParams} from 'angular2/router'; 
import {LineListComponent} from './line-list.component'; 
import {Area} from './area.interface'; 
import {LineService} from './lines.service'; 

@Component({ 
    selector: '[gb-area-detail]', 
    directives: [LineListComponent], 
    template: ` 
     <div *ngIf="area"> 
      <h2>{{area.name}} area</h2> 
      <gb-line-list [areaId]="area.id"></gb-line-list> 
     </div> 
    ` 
}) 
export class AreaDetailComponent implements OnInit { 
    private area: Area; 

    constructor(
     private _lineService: LineService, 
     private _routeParams: RouteParams){} 

    ngOnInit() { 
     let id = +this._routeParams.get('id'); 

     this._lineService.getArea(id) 
      .then(area => this.area = area); 
    } 

} 

линия-list.component.ts

import {Component, OnInit, Input} from 'angular2/core'; 

import {LineService} from './lines.service'; 
import {Line} from './line.interface'; 

@Component({ 
    selector: '[gb-line-list]', 
    template: ` 
     <ul> 


      <li *ngFor="#line of lines">{{line.name}}</li> 
     </ul> 
    ` 
}) 
export class LineListComponent implements OnInit { 
    @Input() areaId: number; 

    private lines: Line[]; 

    constructor (
     private _lineService: LineService) {} 

    getLines() { 
     this._lineService.getLines(this.areaId) 
     .then(lines => this.lines = lines); 
    } 

    ngOnInit() { 
     this.getLines(); 
    } 
} 

Answer 1

Проблема заключается в том, что вы определяя селектор как селектор атрибутов selector: '[gb-line-list]', но вы пытаетесь отобразить компонент с помощью селектора элементов <gb-line-list [areaId]="area.id"></gb-line-list>.

У вас есть два варианта:
- Либо перевести переключатель в положение selector: 'gb-line-list'
- Или изменить элемент в <div gb-line-list [areaId]="area.id"></div>

Наконец, вы могли бы извлечь выгоду из Angular Cheat Sheet