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

Posted 2023-02-22

【中文标题】Angular2在带有参数的组件内调用组件

【英文标题】：Angular2 calling component within component with parameter

【发布时间】：2016-11-01 17:21:34

【问题描述】：

我有一个带有 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，但由于我无法加载第二条评论，我有点走投无路了。

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

感谢大家的帮助。

【问题讨论】：

因此，如果我理解正确，您目前正在尝试在定义单注释指令的 html 中使用单注释指令？ - 这意味着（如果这要成功）你将创建一个无限循环的 cmets，上面写着“另一个评论”

听起来你正在寻找类似***.com/questions/37746516/use-component-in-itself/…的东西

@JarodMoser 完全正确。在这种情况下，我会得到一个无限循环。在我的模板中添加一个简单的 if 语句来检查当前评论是否有子 cmets，将解决这个问题。

【参考方案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

【讨论】：

非常感谢 Günther。这正是我正在寻找的。因为我已经发布了非常简单的 plunker，没有任何 if 语句，它看起来就像一个永远不会结束的递归，确切地说。我已经从模板中删除了代码的那些部分，我检查 currentComment 是否有 subComments。如果是这样，我再次使用<single-comment> 指令。我尝试添加directives: [SingleComment]，但这完全破坏了应用程序，我无法再访问详细信息应用程序了。没有错误或在控制台中打印任何内容。感谢您提供完美的例子。