如何在Angular 8中捕获动态渲染组件的输出？

debugcn 发表于 Dev

netdjw

我想捕获ViewChild渲染组件的输出。ngIf发生火灾后，显示了ViewChild的内容。

这是我模板的代码：

<div *ngIf="isModalVisible" class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <!-- ... -->
      </div>
      <div class="modal-body">
        <ng-template #dialogHost (saveModel)="setModel($event)"></ng-template>
      </div>
    </div>
  </div>
</div>

这是TypeScript文件：

import { ChangeDetectorRef, Component, ComponentFactoryResolver, Input, ViewChild, ViewContainerRef } from '@angular/core';
import { DialogContentItem } from 'src/app/models/dialog/content/dialog-content-item';

@Component({
  selector: 'app-dialog-preparator',
  templateUrl: './dialog-preparator.component.html',
  styleUrls: ['./dialog-preparator.component.css']
})
export class DialogPreparatorComponent {
  isModalVisible = false;
  @Input() dialogContent: DialogContentItem;
  @ViewChild('dialogHost', {static: false, read: ViewContainerRef}) dialogHost: ViewContainerRef;

  showModal() {
    this.isModalVisible = true;
    this.changeDetector.detectChanges();
    this.renderComponent();
  }

  renderComponent() {
    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(this.dialogContent.component);

    this.dialogHost.clear();

    const componentRef = this.dialogHost.createComponent(componentFactory);
    (componentRef.instance as DialogContentInterface).data = this.dialogContent.data;
  }

  setModel(model: any) {
    // I need to emit the model
  }
}

这是ProcutCreateEditComponent：

<app-dialog-preparator [dialogContent]="userDialogContent"></app-dialog-preparator>

此组件的TypeScript代码：

import { Component } from '@angular/core';
import { UserCreateEditComponent } from 'src/app/components/user/user-create-edit.component';

@Component({
  selector: 'app-product-create-edit',
  templateUrl: './product-create-edit.component.html',
  styleUrls: ['./product-create-edit.component.scss']
})
export class ProductCreateEditComponent {
  // this could be any other component in my software
  userDialogContent: DialogContentItem = new DialogContentItem(UserCreateEditComponent, {});

  constructor() {}

  // ...
}

这是UserCreateEditComponent的TypeScript代码：

import { Component, Output } from '@angular/core';

@Component({
  selector: 'app-user-create-edit',
  templateUrl: './user-create-edit.component.html',
  styleUrls: ['./user-create-edit.component.scss']
})
export class UserCreateEditComponent {
  @Output() saveModel: EventEmitter<T> = new EventEmitter();
  user = new User();

  constructor() {}

  save() {
    this.saveModel.emit(this.user);
  }
}

因此，在ProcutCreateEditComponent中，我创建了UserCreateEditComponent的一个实例，并将该实例传递给DialogPreparatorComponent。DialogPreparatorComponent在对话框中显示UserCreateEditComponent，然后单击“保存”按钮（在UserCreateEditComponent中），在那里saveModel()向DialogPreparatorComponent发出信号。我认为...但是相反，我得到了这个错误信息：

Event binding saveModel not emitted by any directive on an embedded template.
Make sure that the event name is spelled correctly and all directives are
listed in the "@NgModule.declarations". ("
      </div>
      <div class="modal-body">
        <ng-template #dialogHost [ERROR ->](saveModel)="setModel($event)"></ng-template>
      </div>
    </div>

实际上，这很好，因为ng-template没有saveModel()输出。

但是我该如何捕捉UserCreateEditComponent的输出呢？

啤酒

由于您是用代码创建组件的，因此无法在模板中添加事件处理程序，因此在创建组件时必须将其也添加到组件代码中。

例如，您可以更改渲染组件方法以添加订阅。

renderComponent() {
  const componentFactory = this.componentFactoryResolver.resolveComponentFactory(this.dialogContent.component);

  this.dialogHost.clear();

  const componentRef = this.dialogHost.createComponent(componentFactory);
  (componentRef.instance as DialogContentInterface).data = this.dialogContent.data;
  (componentRef.instance as DialogContentInterface).saveModel.subscribe((model) => this.setModel(model));
}

我希望我正确地理解了您的模型，并且您在此处创建的组件是具有output属性的组件。

确保还取消订阅动态组件何时被销毁，以免由于剩余的订阅而导致内存泄漏。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。