Question

我有一个评论的详细信息页面。对于单个评论，我创建了一个@Component。特技是，每条评论都可以有孩子评论。

以下是我的details.html的样子：

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

单个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);
  }
}

事情是，第二名。子组件永远不会被调用。

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

这是一个Angular2错误还是根本不可能的那种行为？我的解决方案是显示一个嵌套的注释，但由于我无法获得第二条评论加载，我有点陷入死胡同。

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

谢谢大家的帮助。

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

Angular2使用参数调用组件内的组件

1 个答案: