Question

我有两个AngularJS 2.0组件：

评论：

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

评论：

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>

在评论中＆＃39;模板我有一个Angular循环，可以打印多个Comment组件。在Comment的模板中，我有一个Angular ngIf，如果var commentable为true，则打印一个Comments组件。当我运行它时，我得到：

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

Answer 1

有一种方法可以解决循环依赖问题。

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

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

我已经使用2.0.0-beta.10尝试了这个并且它运行正常。有关更多信息，请参阅github上的this issue report中的tlancina发表的评论。

Answer 2

循环 TypeScript 导入依赖项可能会导致此问题。（我刚碰到这个）

对我来说：

A 是父组件，import和export s B ， C ， D 。为方便起见。
A 尝试渲染 B
B 从 A 导入 C 并尝试渲染 C

只要我将 C 添加到 B 的directives块，我就会收到该错误（无论是 B 模板与否。）真的，因为 A 取决于 B ，我从 A 导入任何东西到 B < / strong>我的阻止

意外的指令值'undefined'

@Eirc Martinez是对的，你必须找到解决循环依赖的方法。

Answer 3

当我导入了一些不存在的东西时，我经常会遇到这个错误。通常这意味着我的导入中存在拼写错误或具有相同性质的东西。

例如，当我尝试导入时出现此错误：

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

当我的意思是：

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

Answer 4

我遇到了类似的问题。虽然这是区分大小写的问题。最后解决这个。

courses.component.ts

import {Component} from 'angular2/core'

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

export class coursesComponent{

}

错误是courseCompomnent类应该是CoursesCompomnent。 Just C是大写字母。

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

＆＃34; EXCEPTION：意外的指令值＆＃39; undefined＆＃39;关于组件的观点＆＃34;在嵌套组件中

4 个答案: