加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

角度 – 嵌套组件中“组件视图”上的“EXCEPTION:意外指令值”

发布时间:2020-12-17 08:07:59 所属栏目:安全 来源:网络整理
导读:我有两个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/co
我有两个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,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>

在评论模板中,我有一个Angular循环打印多个注释组件。在评论模板中,我有一个Angular ngIf,如果var commentable为true,则打印注释组件。当我运行它我得到:

EXCEPTION: Unexpected directive value 'undefined' on the View of component 'Comment'
有一种解决循环依赖问题的方法。
import {forwardRef} from 'angular2/core';
import {Comment} from './Comment.component';

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

我已经试过这个2.0.0-beta.10,它的工作正常。有关更多信息,请参阅tlancina在this issue report的github上发表的评论。

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读