我有两个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上发表的评论。