コンポーネントが正しくレンダリングされない

Question

問題点を示すためにプランナーを作成しました。

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

私は別のコンポーネントで使用するコンポーネントを持って、私はそれを輸入し、ディレクティブにこれを追加しました：[]コンポーネントデコレータのと、それはレンダリングされません...

コンポーネントがline-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>を使用してコンポーネントをレンダリングしようとしています。

あなたは2つの選択肢があります。
- selector: 'gb-line-list'
にセレクタを変更するか - あなたはplnkr逃した最後に、あなたがAngular Cheat Sheet