Angular2 Komponente nicht Rendering

Question

ich eine Plunker erstellt, aber ich scheine nicht in der Lage sein, damit es funktioniert, wenn in Chromkonsole sucht, gibt es einen Fehler, den ich nicht herausfinden kann, warum ...

EXCEPTION: TypeError: Cannot read property 'toString' of undefined

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

Wie auch immer, war meine Frage nicht über Plunker, war es die exemple meiner Fehler zu erstellen.

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 Komponente ist Line-Liste Component, sein Selektor ist gb-line-list und ich versuche es in dieser Datei app/area-list.component.ts zu verwenden.

Ich fühle, dass ich überhaupt nicht klar bin, aber ich kann meinen Plunker nicht vorbildlich arbeiten lassen.

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(); 
    } 
} 

edit: das eigentliche Problem ist dort definieren Component not rendering properly

Answer 1

Sie haben ein Problem in Ihrem impo rts. In der PLNKR, in jeder Datei, in die Sie LineService importieren, importieren Sie es von ./lines.service, aber diese Datei enthält eine Komponente, keinen Dienst, daher importieren Sie etwas undefiniert.

Diese Zeile zum Beispiel

import {LineService} from './lines.service'; 

Und in Ihrem lines.service.ts Datei haben Sie diese

export class LineListComponent implements OnInit {} 

Sie haben keine LineService in dieser Datei.

Der Fehler ist nicht wirklich hilfreich wegen eines Fehlers in der Fehlermeldung selbst (ja, irgendwie verwirrend). Die Fehlermeldung sollte tatsächlich aussehen wie diese

ORIGINAL EXCEPTION: Invalid provider - only instances of Provider and Type are allowed, got: undefined

Es gibt eine pull request ist das Problem zu beheben und die Fehlermeldung machen hilfreicher zu sein.

Wenn Sie beheben, dass, sehen Sie, dass diese Fehlermeldung

Route config should contain exactly one "component", "loader", or "redirectTo" property.

, dass wegen der gleichen oben ist zu bekommen. Sie haben Ihre Klassen in Ihren Importen verwechselt. Zum Beispiel haben Sie diesen Import

import {AreaListComponent} from './area-list.component'; 

Aber in area-list.component definierte man die AreaDetailComponent Klasse.

Sie sind nur die Klassen aus den falschen Dateien importieren, definiert Sie Klasse A in Datei B und Klasse B in der Datei A.

Hier ist Ihre plnkr mit der ursprünglichen Fehler behoben gemeldet.