Angular2组件不渲染

Question

我创建了一个 plunker，但我似乎无法使其工作，在查看 chrome 控制台时，出现错误，我无法弄清楚为什么......

异常：类型错误：无法读取未定义的属性“toString”

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

无论如何，我的问题不是关于 plunker，而是创建我的错误的示例。

我有一个想要在另一个组件中使用的组件，我将它导入并添加到指令中：组件装饰器的 [] 并且它不会呈现...

组件是 line-list.component，它的选择器是 gb-line-list，我正在尝试在这个文件 app/area-list.component.ts 中使用它。

我觉得我根本不清楚，但我无法让我的 plunker 示例正常工作。

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

编辑： 真正的问题在那里定义 Component not rendering properly

Answer 1

您的导入有问题。在 plnkr 中，在您导入 LineService 的每个文件中，您从 ./lines.service 导入它，但该文件包含一个组件，而不是服务，因此您正在导入未定义的内容。

以这一行为例

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

在你的lines.service.ts 文件中你有这个

export class LineListComponent implements OnInit {}

您在该文件中没有LineService。

由于错误消息本身存在错误（是的，有点令人困惑），因此该错误并没有真正的帮助。错误消息实际上应该是这样的

原始例外：无效的提供者 - 只允许提供者和类型的实例，得到：未定义

有一个pull request 可以解决该问题并使错误消息更有帮助。

当你修复它时，你会看到你会收到这个错误消息

路由配置应该只包含一个“component”、“loader”或“redirectTo”属性。

那是因为上述相同。您在导入时混淆了您的课程。例如你有这个导入

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

但在 area-list.component 中，您定义了 AreaDetailComponent 类。

您只是从不正确的文件中导入类，您在文件 B 中定义了类 A，在文件 A 中定义了类 B。

这是您的plnkr，报告的原始错误已修复。