Komponente wird nicht ordnungsgemäß gerendert

Question

Ich habe einen Plünderer erstellt, um zu zeigen, was das Problem ist.

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

Ich habe eine Komponente I in einer anderen Komponente verwenden möchten, importierte ich sie und fügte hinzu, es den Richtlinien [] des Bauteils Dekorateur und es nicht machen nicht ...

Die Die Komponente ist line-list.component, ihr Selektor ist gb-line-list und ich versuche, sie in dieser Datei app/area-list.component.ts zu verwenden.

Die erste Seite zeigt eine Liste von Bereichen, wenn ich auf einen Bereich klicke, möchte ich das Detail dieses Bereichs mit einer Liste von Linien anzeigen. Das ist die Liste der Zeile, die nicht rendert ...

flächen 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); 
    } 

} 

Line-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

Das Problem ist, dass Sie Definieren des Selektors als Attributselektor selector: '[gb-line-list]' Sie versuchen jedoch, die Komponente mithilfe eines Elementselektors zu rendern <gb-line-list [areaId]="area.id"></gb-line-list>.

Sie haben zwei Möglichkeiten:
- Entweder die Wähler auf selector: 'gb-line-list'
ändern - Oder das Element ändern schließlich zu <div gb-line-list [areaId]="area.id"></div>

, die Sie von Angular Cheat Sheet