Question

我在点击时添加了不同的组件，用户可以添加任何组件并删除它但删除组件如何获取组件的引用，用户单击是否有任何方法可以在单击时获取组件引用角4。这是以 app.component.ts

加载的示例组件

@Component({
  selector: 'question-paragraph',
  template: `<div class="form-group container">
    <textarea></textarea>
  </div>`,
})
export class QuestionParagraphComponent { }

@Component({
  selector: 'question-image',
  template: `<div class="form-group container">
    <form enctype="multipart/form-data" action="" method="post">
      <p>Upload Image</p>
      <input type="file" name="uploaded_file[]" />
    </form>
  </div>`,
})
export class QuestionImageComponent { }

这就是添加它们的功能

if (item=='question') {
      this.addService.appendComponentToBody(QuestionDetailComponent);
      this.removeComponent(this.sg[this.sg['question_id']]);
    } else if (item=='image') {
      this.addService.appendComponentToBody(QuestionImageComponent);
      this.removeComponent(this.sg[this.sg['question_id']]);
      let componentRef = this.addService.appendComponentToBody(QuestionTypeComponent);
      this.sg['ComRef'] = componentRef;
    }

我知道仅当我知道它的参考

时才删除该组件的功能

removeComponent(componentRef){
    this.appRef.detachView(componentRef.hostView);
    componentRef.destroy();
  }

有人可以告诉我如何在点击时获取组件的引用，谢谢。

Answer 1

通常，当您动态添加组件时，您将其添加到父元素。您可以将@ViewChildren添加到您希望引用的组件并访问其子项。第二个参数是ViewContainerRef类型，您想要访问动态添加的子项：

 @ViewChildren(DynamicComponent, { read: ViewContainerRef }) components: QueryList<DynamicComponent>

此外，您也可以使用您使用的createComponent方法的返回值。

<强>更新您也可以订阅组件参考中的更改：

this.components.changes().subscribe(x=> console.log(x));

单击Angular-4中的组件参考

1 个答案: