有没有办法使用模板在角度动态渲染组件中绑定事件？

Question

我正在使用下面的代码动态渲染我的组件 -

    @for(item of list(); track $index){
    <!-- dynamic rendering using ng-container -->
    <ng-container *ngComponentOutlet="componentToRender(); inputs: item;" />
}

有没有一种方法可以使用类似于

input

的 ng-container 的任何属性来绑定事件？ 我已经在互联网上搜索过建议使用

@ViewChild

的解决方案，但我想知道是否存在仅使用事件绑定模板的解决方案。

Answer 1

是的，您可以将要调用的方法作为属性传入，并在 ng-container 内部执行该方法。该属性包含回调，您可能缺乏严格的类型，但您可以通过为输入信号提供正确的类型定义来解决此问题。

家长：

HTML：

@for(item of list(); track $index){
  <!-- dynamic rendering using ng-container -->
  <ng-container *ngComponentOutlet="componentToRender(); inputs: {item, callback: callback.bind(this)};" />
}

TS：

callback(input: string) {
  console.log(this, input, 'child calling parent');
}

完整代码：

import { Component, input, signal, InputSignal } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-child',
  standalone: true,
  template: `
    child: {{item().test}}
    <button (click)="callback()('data from child')">call parent method</button>
  `,
})
export class Child {
  item: InputSignal<any> = input.required();
  callback: InputSignal<(callbackProp: string) => void> = input.required();
}

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [Child, CommonModule],
  template: `
    @for(item of list(); track $index){
      <!-- dynamic rendering using ng-container -->
      <ng-container *ngComponentOutlet="componentToRender(); inputs: {item, callback: callback.bind(this)};" />
    }
  `,
})
export class App {
  name = 'Angular';
  list = signal([{ test: 1 }]);
  componentToRender = signal(Child);

  callback(input: string) {
    console.log(this, input, 'child calling parent');
  }
}

bootstrapApplication(App);

Stackblitz 演示