Angular2在带有参数的组件内调用组件

Question

我有一个带有 cmets 的详细信息页面。对于单个评论，我创建了一个 @Component。诀窍是，每个评论都可以有 child-cmets。

这是我的 details.html 的样子：

some info here...
<single-comment ngFor... [comment]="'hi comment'"></single-comment>

single-comment.html 看起来像：

<ion-item no-padding>
  <small dark>
    <strong>{{comment}}</strong>
  </small>
  <ng-content></ng-content>
  <single-comment [comment]="'ANOTHER comment'"></single-comment>
</ion-item>

组件本身：

@Component({
  selector: 'single-comment',
  templateUrl: 'single-comment.html'
})
export class SingleComment {
  @Input() comment: string;

  constructor() {
  }

  ngAfterContentInit() {
        console.log('new comment', this.comment);
  }
}

问题是，第二个。 child-component 永远不会被调用。

我还创建了一个 Plunkr 代码，可以更好地显示示例。 Plunkr 在这里可见：https://plnkr.co/edit/w5kWE6QdbEoXIpqLI4dc?p=preview。 plunkr 示例中的“详细信息”页面是 home.html，其中还包含 @Component 本身。

这是一个 Angular2 错误还是根本不可能发生这种行为？我的解决方案是显示一个嵌套的 cmets，但由于我无法加载第二条评论，我有点走投无路了。

是否有解决方案或只是更好的方法来实现我想要做的事情？

感谢大家的帮助。

Answer 1

更新

随着@NgModule 的引入以及directives 到@NgModule 的迁移，forwardRef 应该不再需要了。

原创

如果你想在自身内部使用一个组件（递归），你需要像任何其他组件或指令一样将它添加到providers，因为@Component() 装饰器位于类之前，并且不能在它之前引用该类声明你还需要forwardRef

import {Component, forwardRef, Input} from '@angular/core'

@Component({
  selector: 'single-comment',
  templateUrl: 'single-comment.html',
  directives: [forwardRef(() => SingleComment)]
})
export class SingleComment {
  @Input() comment: string;

  constructor() {
  }

  ngAfterContentInit() {
        console.log('new comment', this.comment);
  }
}

您还需要确保递归在某处结束，否则您将获得堆栈溢出。在 Plunker 中使用 *ngIf:

Plunker example