Angular2 bileşeni

Question

Bir plunker yarattı oluşturulmuyorsa ama krom konsolunda ararken bu işe yapabilmek görünmüyor, ben çözemiyorum bir hata neden var ...

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

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

Neyse, benim sorum benim hata eXEMPLE yaratmaktı, plunker ilgili değildi.

bileşen hat listesi ... [] bileşen dekoratör ve render değildir: Ben başka bir bileşen kullanmak istediğiniz bir bileşene sahip

, bunu ithal ve direktifleri onu ekledi .component, onun seçici gb-line-list ve ben bu dosya app/alan-list.component.ts içinde kullanmaya çalışıyorum.

Hiç net olmadığımı hissediyorum, ancak plunker'ımın düzgün çalışmasını sağlayamam.

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

} 

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

düzenleme: orada gerçek bir sorun tanımlayan Component not rendering properly

Answer 1

Sizin impounuzda bir sorununuz var rts. Plnkr içinde, LineService dosyasını içe aktardığınız her dosyada ./lines.service'dan içe aktarırsınız, ancak bu dosya bir Bileşen içerir, bir hizmet içermez, bu nedenle tanımlanmamış bir şeyi içe aktarırsınız.

örnek

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

için Ve lines.service.ts dosyasında Bu satır bu

export class LineListComponent implements OnInit {} 

O dosyada hiçbir LineService var var.

Hata, hata iletisindeki bir hatadan dolayı gerçekten yararlı değildir (evet, kafa karıştırıcı gibi). Hata mesajı aslında bu sorunu çözmek ve daha yararlı olması için hata mesajını yapmak için bir pull request var bu

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

gibi görünmelidir. Bunu düzeltmek zaman

, size çünkü aynı Yukarıdakilerin var bu hata mesajını

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

alırsınız göreceksiniz. Sınıflarınızı ithalatlarınızda karıştırdınız. Örneğin bu ithalatını

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

var Ama area-list.component size AreaDetailComponent sınıfını tanımladı.Sadece yanlış dosyalarından sınıfları ithal ediyoruz

, sen

Burada orijinal hata sabit bildirildi ile sizin plnkr var dosya A'da dosya B ve B sınıfı A sınıfı tanımladı.