＆QUOT;例外：在组分QUOT的观意外指令值“未定义”;在嵌套组件 [英] "EXCEPTION: Unexpected directive value 'undefined' on the View of component" in nested components

问题描述

我有两个AngularJS 2.0组件：

注释

 进口{组件，注射，查看，输入}从'angular2 /核心;
从./comments.component进口{}评论;@Injectable（）@零件（{
    选择：评论
}）@视图（{
    templateUrl：RES /模板/组件/ comment.component.html'，
    指令：[评论]
}）出口类评论{
    @input（）评论;
    @input（）commentable = FALSE;
}
 

评论

 进口{组件，注射，查看，输入}从'angular2 /核心;
进口{} CommentsService从'./../services/comments.service';
从angular2 /路由器的进口{RouteParams};
从./Comment.component进口{注释};@Injectable（）@零件（{
    选择：意见，
    供应商：[CommentsService]
}）@视图（{
    templateUrl：RES /模板/组件/ comments.component.html'，
    指令：[评论]
}）出口类评论{
    @input（）ID;
    公众意见;
    公共commentsService：CommentsService;
    公共routeParams：RouteParams;    构造函数（routeParams：RouteParams，commentsService：CommentsService）{
        VAR自我=这一点;        self.routeParams = routeParams;
        self.commentsService = commentsService;
    }    ngOnInit（）{
        VAR自我=这一点;        如果（self.ID！==未定义）
            self.comments = self.commentsService.comments [self.ID]
        否则，如果（self.routeParams.params ['身份证']！==未定义）
            self.comments = self.commentsService.comments [self.routeParams.params ['身份证'];
        其他
            self.comments =不确定;
    }
}
 

comment.template

 ＆LT; D​​IV CLASS =后＆GT;
    ＆LT; D​​IV CLASS =作者-PIC＆GT;＆LT; / DIV＆GT;
    ＆LT; D​​IV CLASS =身体＆GT;
        ＆LT; H2类=标题＆GT; {{comment.author.name}} {{comment.author.surname}}＆LT; / H＆GT;
        ＆LT; H3类=标题＆GT; {{comment.publication |日期：MM / DD / YY}}＆LT; / H3 GT＆;
        ＆所述p为H.; {{comment.body}}＆下; / P＆GT;
    ＆LT; / DIV＆GT;
    ＆LT;意见* ngIf =commentable[ID] =comment.ID＆GT;＆LT; /意见＆GT;
＆LT; / DIV＆GT;
 

comments.template

 ＆LT; D​​IV * ngIf =！==意见未定义＆GT;
    ＆LT;注释* ngFor =的评论＃评论[评论] =评论[commentable] =真＆GT;＆LT; / commento＆GT;
＆LT; / DIV＆GT;
 

在评论模板我有一个角环，打印多个注释部分。在评论的模板，我有一个角ngIf，如果VAR commentable是真实的，打印评论的组成部分。当我运行它，我得到：

 例外：对组件的视图未定义意外的指导价值评论
 

解决方案

一个圆形的打字稿的进口依存度可能导致此。 （我只是碰到了这一点）

有关我：

1. A 与父组件，而导入和导出小号的乙 C D 。为了方便。




2. A 试图呈现的乙




3. 乙进口 C 从的 A 并试图呈现的 C 。

当我添加的 C 到指令块的乙后，我得到这个错误（不管它是的乙的模板或没有。）真的，因为 A 取决于乙上，一刻起，我导入从什么的 A 到乙的块，我得到

  

意外的指导价值未定义

@Eirc马丁内斯是正确的，你必须找到周围循环依赖的方式。

I have two AngularJS 2.0 components:

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

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>

In Comments' template I have an Angular Loop that prints multiple Comment components. In Comment's template I have an Angular ngIf that, if var commentable is true, prints a Comments component. When I run it I get:

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

解决方案

A circular TypeScript import dependency can cause this. (I just ran into this)

For me:

1. A is the parent component, and imports and exports B, C, D. for convenience.

2. A tries to render B

3. B imports C from A and tries to render C.

As soon as I add C to the directives block of B, I get that error (whether it is in B's template or not.) Really, since A depends on B, the minute I import anything from A into B's block I get

Unexpected directive value 'undefined'

@Eirc Martinez is right and you'll have to find a way around that circular dependency.

这篇关于＆QUOT;例外：在组分QUOT的观意外指令值“未定义”;在嵌套组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！