組件無法正常渲染

Question

我創建了一個顯示問題所在的plunker。

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>呈現組件。

你有兩個選擇：
- 要麼改變選擇到selector: 'gb-line-list'
- 或改變元素<div gb-line-list [areaId]="area.id"></div>

最後，您可能你錯過了plnkr受益於Angular Cheat Sheet