嵌套组件中的“异常：组件视图上的意外指令值‘未定义’”答案

【问题标题】："EXCEPTION: Unexpected directive value 'undefined' on the View of component" in nested components嵌套组件中的“异常：组件视图上的意外指令值‘未定义’”
【发布时间】：2015-12-30 13:07:31
【问题描述】：

我有两个 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>

cmets.template：

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

在 Comments 的模板中，我有一个打印多个 Comment 组件的 Angular Loop。在 Comment 的模板中，我有一个 Angular ngIf，如果 var commentable 为 true，则打印一个 Comments 组件。当我运行它时，我得到：

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

【问题讨论】：

您能发布相关的模板和服务吗？为什么要在组件上方添加 @Injectable 装饰器？
很可能是因为你有一个循环依赖。评论有评论作为指令，评论也有评论作为指令。从另一个中删除其中一个。
如果我删除其中一个，它将无法正常工作...@Eric Martinez
如果现在用这种方法甚至不能正常工作，你怎么知道它不会工作？为什么需要这种循环依赖？如果你想从Comment（父子通信）中获取Comments，可以直接注入，不需要添加为指令。
我发布了相关的模板@Romain。

标签： angular

【解决方案1】：

有办法解决循环依赖问题。

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

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

我已经用2.0.0-beta.10 试过了，效果很好。有关更多信息，请参阅 tlancina 在 github 上 this issue report 的评论。

【讨论】：

虽然避免循环依赖似乎是更谨慎的方法，但我发现这个命令在开发过程中非常有用。

【解决方案2】：

循环 TypeScript 导入依赖可能会导致这种情况。（我刚碰到这个）

对我来说：

A是父组件，而imports和exports B、C、 D。为了方便。
A 尝试渲染 B
B 导入 C A 并尝试渲染 C.

只要将 C 添加到 B 的 directives 块，我就会收到该错误（无论它是否在 B 中） s 模板与否。）真的，因为 A 依赖于 B，所以我将任何东西从 A 导入到 B我得到的块

意外的指令值“未定义”

@Eirc Martinez 是对的，你必须想办法绕过这种循环依赖。

【讨论】：

谷歌搜索错误导致这篇文章，并找到/删除循环依赖解决了它，谢谢

【解决方案3】：

当我导入不存在的内容时，我经常会收到此错误。通常这意味着我的导入中存在拼写错误或具有相同性质的内容。

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

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

当我真正的意思是：

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

【讨论】：

【解决方案4】：

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

courses.component.ts

import {Component} from 'angular2/core'

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

export class coursesComponent{

}

错误是 courseCompomnent 类应该是 CoursesCompomnent。只有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

【讨论】：