Question

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

EXCEPTION：TypeError：无法读取未定义的属性'toString'

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

无论如何，我的问题不是关于plunker，而是创建我的bug的例子。

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

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

编辑：真正的问题是在那里定义 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来修复该问题，并使错误消息更有帮助。

当你修复它时，你会看到你会收到此错误信息

路由配置应该只包含一个“组件”，“加载器”或“redirectTo”属性。

那是因为同样的情况。您在导入中混淆了类。例如，您有此导入

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

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

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

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

Angular2组件无法呈现

1 个答案: