"ECCEZIONE: il valore di direttiva imprevisto 'undefined' sulla vista di componente" a componenti nidificati

Question

Ho due AngularJS 2.0 Componenti:

Commento:

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

Commenti:

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

comment.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> 

Nel modello Commenti Ho un ciclo angolare che consente di stampare più componenti commento. Nel modello dei commenti ho un ngIf angolare che, se var commentable è vero, stampa un componente commenti. Quando l'eseguo ottengo:

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

Answer 1

Una circolare dattiloscritto dipendenza dalle importazioni può causare questo. (Ho appena incontrato questo)

Per me:

1. A è la componente principale, e import s e export s B, C, D. per comodità.

2. A cerca di rendere B

3. B importazioni CdaA e cerca di rendere C.

Non appena aggiungo C alla directives blocco di B, ottengo questo errore (se è in modello o non s' B.) In realtà, dal momento che A dipende su B, il minuto ho importare qualsiasi cosa, da Un nel blocco 's B ottengo

Valore di direttiva inatteso "indefinito"

@Eirc Martinez ha ragione e dovrete trovare un modo per aggirare tale dipendenza circolare.

Answer 2

C'è un modo per risolvere il problema della dipendenza circolare.

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

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

Ho provato questo con 2.0.0-beta.10 e funziona benissimo. Vedi il commento di tlancina in this issue report su github per ulteriori informazioni.

Answer 3

Spesso ricevo questo errore quando ho importato qualcosa che non esiste. Di solito questo significa che c'è un errore ortografico nella mia importazione o qualcosa della stessa natura.

Per esempio ottengo questo errore quando provo ad importare:

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

Quando ho effettivamente dire:

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

Answer 4

ho avuto un problema una cosa del genere. Sebbene questo sia un problema sensibile al maiuscolo/minuscolo. Finalmente risolvilo.

courses.component.ts

import {Component} from 'angular2/core' 

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

export class coursesComponent{ 

} 

L'errore è di classe coursesCompomnent dovrebbe essere CoursesCompomnent. Just C è la lettera maiuscola.

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