从 Angular 中的 parent 组件调用动态 child 组件中的公共接口方法 8

Question

我需要从 Angular 中 parent 组件的动态 child 组件中实现的接口调用通用方法。我的 parent html 组件将如下所示：

parent.component.html :

<div *ngFor = "let config of childConfigs"> 

    <div *ngIf = " config.type == 'a' ">
        <child-a [config]="config"></child-a>
    </div>
    <div *ngIf = " config.type == 'b' ">
        <child-b [config]="config"></child-b>
    </div>
    .
    .
    <div *ngIf = " config.type == 'n' ">
        <child-n [config]="config"></child-n>
    </div>
</div>
<button (click)="resetComponent()"> Reset</button>

假设有一个接口 'ComponentActions' 包含一个方法 resetComponent() 所有 child 组件都实现了它。示例 child 组件结构将像这样

child-a.component.ts :

export class ChildAComponent implements ComponentActions {

@Input() config;

resetComponent(){
    // do something
}
}

如何在 child 组件中通过单击 parent 中的按钮来调用此方法？

Answer 1

是的，这是一个棘手的问题。您的子组件都继承了一个基本接口。有一种方法可以实现这一点。然而，您将需要调整所有组件类型并将您的界面更改为抽象 class。别担心，如果它是一个没有定义逻辑的抽象class，它会像一个接口一样工作，你可以使用implements，但这样你就不需要创建一个[=15] =]:

export abstract class ComponentActions {
  resetComponent(): void;
}

如果您不能或不想将其设为界面，请执行以下操作：

export const ComponentActionsToken = new InjectionToken<ComponentActions>('component actions');

有了这个，您可以为所有子组件提供以下内容，因此对于您放置为 useExisting 的每个子组件，相应的子组件 class:

@Component({
  selector: 'child-x',
  providers: [{ provide: ComponentActions, useExisting: ChildXComponent }]
})
export class ChildXComponent implements ComponentActions {
  resetComponent(): void {
    // do something
  }
}

@Component({
  selector: 'child-y',
  providers: [{ provide: ComponentActions, useExisting: ChildYComponent }]
})
export class ChildYComponent implements ComponentActions {
  resetComponent(): void {
    // do something
  }
}

_{如果您使用的是注入令牌，则必须将 provide 属性中的 ComponentActions 值更改为 ComponentActionsToken}

现在感觉，根据您的模板，您可以在父模板中拥有多个 ComponentActions 实例。因此，您需要一些逻辑来确定要对哪个执行操作。但我想你已经准备好了。

除此之外，您还想同时对所有组件执行此操作。所以这就是 ViewChildren 装饰器的用武之地：

@Component({
  selector: 'parent'
})
export class ParentComponent {
  @ViewChildren(ComponentActions)
  children?: QueryList<ComponentActions>

  resetComponent(): void {
    this.children?.forEach((child) => child.resetComponent());
  }
}

_{如果您使用的是注入令牌，则必须将ViewChildren中的ComponentActions值更改为ComponentActionsToken}

就是这样。请注意，这是一段未经测试的代码，但它应该可以工作。如果没有，请告诉我

从 Angular 中的 parent 组件调用动态 child 组件中的公共接口方法 8

Calling a common interface method in dynamic child components from parent component in Angular 8

angular

typescript

angular6

angular8

angular-dynamic-components