"EXCEPTION: Giá trị chỉ thị không mong muốn 'undefined' trên nhìn ra thành phần" trong thành phần lồng nhau

Question

Tôi có hai AngularJS 2,0 phần:

Comment:

import {Component, Injectable, View, Input} from 'angular2/core'; 
import {Comments} from './comments.component'; 

@Injectable() 

@Component({ 
    selector: 'comment' 
}) 

@View({ 
    templateUrl: 'res/templates/components/comment.component.html', 
    directives: [Comments] 
}) 

export class Comment { 
    @Input() comment; 
    @Input() commentable = false; 
} 

Comments:

import {Component, Injectable, View, Input} from 'angular2/core'; 
import {CommentsService} from './../services/comments.service'; 
import {RouteParams} from 'angular2/router'; 
import {Comment} from './Comment.component'; 

@Injectable() 

@Component({ 
    selector: 'comments', 
    providers: [CommentsService] 
}) 

@View({ 
    templateUrl: 'res/templates/components/comments.component.html', 
    directives: [Comment] 
}) 

export class Comments { 
    @Input() ID; 
    public comments; 
    public commentsService: CommentsService; 
    public routeParams: RouteParams; 

    constructor (routeParams: RouteParams, commentsService: CommentsService) { 
     var self = this; 

     self.routeParams = routeParams; 
     self.commentsService = commentsService; 
    } 

    ngOnInit() { 
     var self = this; 

     if (self.ID !== undefined) 
      self.comments = self.commentsService.comments[self.ID]; 
     else if (self.routeParams.params['id'] !== undefined) 
      self.comments = self.commentsService.comments[self.routeParams.params['id']]; 
     else 
      self.comments = undefined; 
    } 
} 

nhận xét.template:

<div class="post"> 
    <div class="author-pic"></div> 
    <div class="body"> 
     <h2 class="title">{{comment.author.name}} {{comment.author.surname}}</h2> 
     <h3 class="title">{{comment.publication | date:"MM/dd/yy"}}</h3> 
     <p>{{comment.body}}</p> 
    </div> 
    <comments *ngIf="commentable" [ID]="comment.ID"></comments> 
</div> 

comments.template:

<div *ngIf="comments !== undefined"> 
    <comment *ngFor="#comment of comments" [comment]="comment" [commentable]="true"></commento> 
</div> 

Trong mẫu Comments' Tôi có một vòng góc mà in nhiều thành phần bình luận. Trong mẫu của Comment, tôi có một Angular ngIf, nếu var commentable là true, in một thành phần Comments. Khi tôi chạy nó tôi nhận được:

EXCEPTION: Unexpected directive value 'undefined' on the View of component 'Comment' 

Answer 1

Một thông tư nguyên cảo phụ thuộc nhập khẩu có thể gây ra điều này. (Tôi chỉ cần chạy vào này)

Đối với tôi:

1. Một là thành phần phụ huynh, và import s và export s B, C, D. cho thuận tiện.

2. Một cố gắng để làm cho B

3. B nhập khẩu CtừMột và cố gắng làm cho C.

Ngay sau khi tôi thêm C đến directives khối B, tôi nhận được lỗi đó (cho dù đó là trong mẫu B 's hay không.) Thực sự, kể từ Một phụ thuộc trên B, phút tôi nhập khẩu bất cứ thứ gì từ Một vào khối B 's tôi nhận được

Giá trị chỉ thị không mong đợi 'không xác định'

@Eirc Martinez là đúng và bạn sẽ phải tìm cách xoay quanh sự phụ thuộc vòng tròn đó.

Answer 2

Có một cách để giải quyết vấn đề phụ thuộc vòng tròn.

import {forwardRef} from 'angular2/core'; 
import {Comment} from './Comment.component'; 

... 
directives: [forwardRef(() => Comment)] 
}) 

Tôi đã thử điều này với 2.0.0-beta.10 và hoạt động tốt. Xem nhận xét của tlancina trong this issue report về github để biết thêm thông tin.

Answer 3

Tôi thường gặp lỗi này khi tôi đã nhập nội dung không tồn tại. Thông thường, điều này có nghĩa là có lỗi chính tả trong quá trình nhập của tôi hoặc nội dung nào đó có cùng tính chất.

Ví dụ tôi nhận được lỗi này khi tôi cố gắng nhập khẩu:

import {Comment} from './Comment.component'; 

Khi tôi thực sự có nghĩa là:

import {CommentComponent} from './Comment.component'; 

Answer 4

Tôi có một vấn đề gì đó như thế. Mặc dù đây là vấn đề nhạy cảm. Cuối cùng giải quyết điều này.

courses.component.ts

import {Component} from 'angular2/core' 

@Component({ 
selector: 'courses', 
template: '<h2>Courses</h2>' 
}) 

export class coursesComponent{ 

} 

Sai lầm là coursesCompomnent lớp nên CoursesCompomnent. Chỉ C là chữ hoa.

app.component.ts

import { Component } from 'angular2/core'; 
import{CoursesComponent} from './courses.component'; 

@Component({ 
selector: 'my-app', 
template: '<h1>Hello Angular</h1><courses></courses>', 
directives: [CoursesComponent] 
}) 
export class AppComponent { 

} 

https://github.com/angular/angular/issues/7526