Angular中如何减少多态组件切换时的重复绑定？

针对你这种多个同基类组件切换时重复绑定的问题，这里有几个落地的解决办法，既能保留多态性，又能大幅减少重复代码：

1. 用自定义指令批量传递共享绑定 #

你之前试的@HostBinding搞不定Input/Output，换个思路：写一个专门的指令来接管共享绑定的传递，直接把绑定数据映射到目标组件上。

步骤： #

• 先确保所有组件继承的基类里，已经定义了所有共享的@Input()和@Output()，比如：

export abstract class BaseDataComponent {
  @Input() data: BaseDataObject;
  @Output() update = new EventEmitter<BaseDataObject>();
  @Output() delete = new EventEmitter<void>();
  // 其他共享绑定...
}

• 编写SharedBindingsDirective，接收包含共享数据和事件处理的对象，注入目标组件（因为组件继承基类，可直接用BaseDataComponent类型获取）：

import { Directive, Input, OnInit, Optional, OnDestroy } from '@angular/core';
import { BaseDataComponent } from './base-data.component';
import { Subscription } from 'rxjs';

@Directive({
  selector: '[sharedBindings]'
})
export class SharedBindingsDirective implements OnInit, OnDestroy {
  @Input() sharedBindings: {
    data: BaseDataObject;
    onUpdate: (data: BaseDataObject) => void;
    onDelete: () => void;
  };
  private subs = new Subscription();

  constructor(@Optional() private targetComponent: BaseDataComponent) {}

  ngOnInit(): void {
    if (!this.targetComponent) return;
    // 绑定Input
    this.targetComponent.data = this.sharedBindings.data;
    // 绑定Output，存入订阅集合便于销毁
    this.subs.add(this.targetComponent.update.subscribe(this.sharedBindings.onUpdate));
    this.subs.add(this.targetComponent.delete.subscribe(this.sharedBindings.onDelete));
  }

  ngOnDestroy(): void {
    this.subs.unsubscribe();
  }
}

• 宿主组件里定义共享绑定对象：

export class HostComponent {
  currentData: BaseDataObject;

  handleUpdate(data: BaseDataObject) { /* 处理逻辑 */ }
  handleDelete() { /* 处理逻辑 */ }

  get sharedBindings() {
    return {
      data: this.currentData,
      onUpdate: this.handleUpdate.bind(this),
      onDelete: this.handleDelete.bind(this)
    };
  }
}

• 模板里只用写一行共享绑定，再加专属绑定即可，视图引用#object也能正常使用：

<ng-container [ngSwitch]="currentData.type">
  <component-a 
    [sharedBindings]="sharedBindings"
    [exclusiveInputA]="someValue"
    (exclusiveOutputA)="handleExclusiveA($event)"
    #objectA></component-a>

  <component-b 
    [sharedBindings]="sharedBindings"
    [exclusiveInputB]="anotherValue"
    #objectB></component-b>
</ng-container>

2. 用ng-template封装重复绑定代码 #

如果不想写指令，也可以用模板封装共享部分，减少重复代码的分散：

步骤： #

• 定义包含共享绑定的模板，用let-接收上下文变量：

<ng-template #sharedTemplate let-data="data" let-onUpdate="onUpdate" let-onDelete="onDelete">
  <ng-content></ng-content>
</ng-template>

• 宿主组件里定义共享上下文对象：

sharedContext = {
  data: this.currentData,
  onUpdate: this.handleUpdate.bind(this),
  onDelete: this.handleDelete.bind(this)
};

• 每个组件切换时，用ngTemplateOutlet引用共享模板，插入组件并添加专属绑定：

<ng-container [ngSwitch]="currentData.type">
  <ng-container *ngSwitchCase="'typeA'" [ngTemplateOutlet]="sharedTemplate" [ngTemplateOutletContext]="sharedContext">
    <component-a 
      [data]="sharedContext.data"
      (update)="sharedContext.onUpdate($event)"
      (delete)="sharedContext.onDelete()"
      [exclusiveInputA]="someValue"
      (exclusiveOutputA)="handleExclusiveA($event)"
      #objectA></component-a>
  </ng-container>

  <ng-container *ngSwitchCase="'typeB'" [ngTemplateOutlet]="sharedTemplate" [ngTemplateOutletContext]="sharedContext">
    <component-b 
      [data]="sharedContext.data"
      (update)="sharedContext.onUpdate($event)"
      (delete)="sharedContext.onDelete()"
      [exclusiveInputB]="anotherValue"
      #objectB></component-b>
  </ng-container>
</ng-container>

这种方式把重复绑定集中到一处，后续修改共享逻辑时只需改模板即可。

3. 动态组件加载（最简洁的方案） #

如果想彻底去掉ngSwitch的模板代码，用动态加载组件的方式统一处理共享绑定：

步骤： #

• 宿主组件里准备一个容器元素，用于渲染动态组件：

<div #componentContainer></div>

• 在宿主组件中，根据数据类型动态创建组件并设置绑定：

import { Component, ViewChild, ViewContainerRef, ComponentFactoryResolver, SimpleChanges, OnChanges } from '@angular/core';
import { BaseDataComponent } from './base-data.component';
import { ComponentA } from './component-a.component';
import { ComponentB } from './component-b.component';
import { Subscription } from 'rxjs';

const TYPE_COMPONENT_MAP = {
  typeA: ComponentA,
  typeB: ComponentB
};

export class HostComponent implements OnChanges {
  @ViewChild('componentContainer', { read: ViewContainerRef }) container: ViewContainerRef;
  currentData: BaseDataObject;
  currentComponentInstance: BaseDataComponent;
  private subs = new Subscription();

  constructor(private resolver: ComponentFactoryResolver) {}

  ngOnChanges(changes: SimpleChanges) {
    if (changes['currentData']) {
      this.renderComponent();
    }
  }

  renderComponent() {
    this.subs.unsubscribe();
    this.container.clear();
    const componentType = TYPE_COMPONENT_MAP[this.currentData.type];
    if (!componentType) return;

    const factory = this.resolver.resolveComponentFactory(componentType);
    const componentRef = this.container.createComponent(factory);
    this.currentComponentInstance = componentRef.instance;

    // 设置共享Input
    this.currentComponentInstance.data = this.currentData;
    // 订阅共享Output
    this.subs.add(this.currentComponentInstance.update.subscribe(this.handleUpdate.bind(this)));
    this.subs.add(this.currentComponentInstance.delete.subscribe(this.handleDelete.bind(this)));

    // 设置专属绑定
    if (this.currentComponentInstance instanceof ComponentA) {
      this.currentComponentInstance.exclusiveInputA = this.someValue;
      this.subs.add(this.currentComponentInstance.exclusiveOutputA.subscribe(this.handleExclusiveA.bind(this)));
    } else if (this.currentComponentInstance instanceof ComponentB) {
      this.currentComponentInstance.exclusiveInputB = this.anotherValue;
      this.subs.add(this.currentComponentInstance.exclusiveOutputB.subscribe(this.handleExclusiveB.bind(this)));
    }
  }

  handleUpdate(data: BaseDataObject) { /* 处理逻辑 */ }
  handleDelete() { /* 处理逻辑 */ }
  handleExclusiveA(event: any) { /* 处理逻辑 */ }
  handleExclusiveB(event: any) { /* 处理逻辑 */ }
}

这个方案完全不需要在模板里写重复绑定，所有逻辑集中在TS里，currentComponentInstance还能直接替代模板里的#object引用。

内容的提问来源于stack exchange，提问作者nickbelling