Angular2 компонента не оказывающий

Question

Я создал plunker, но я, кажется, не в состоянии заставить его работать, если смотреть в хромированной консоли, есть ошибка, я не могу понять, почему ...

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

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

Во всяком случае, мой вопрос был не о plunker, это должно было создать Exemple моей ошибки.

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

Компонент линейный список .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(); 
    } 
} 

редактировать: реальная проблема определения там Component not rendering properly

Answer 1

У вас есть проблема в вашем impo ртс. В plnkr в каждом файле, где вы импортируете LineService, вы импортируете его с ./lines.service, но этот файл содержит компонент, а не службу, поэтому вы импортируете что-то неопределенное.

Эта линия, например

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

И в файле lines.service.ts у вас есть это

export class LineListComponent implements OnInit {} 

У вас в этом файле нет LineService.

Ошибка не очень полезна из-за ошибки в самом сообщении об ошибке (да, это путаница). Сообщение об ошибке должно выглядеть на самом деле этого

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

Там в pull request, чтобы решить эту проблему и сделать сообщение об ошибке, чтобы быть более полезным.

Когда вы исправить это, вы увидите, что вы получите это сообщение об ошибке

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

Это из-за того же выше. Вы путаете свои классы в своем импорте. Например у вас есть этот импортировать

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

Но в area-list.component вы определили AreaDetailComponent класс.

Вы просто импортировать классы из некорректных файлов, вы определили класс А в файле B и класса B в файле А.

Вот ваш plnkr с оригиналом ошибки сообщили фиксированы.