Angular2动态组件的最佳方法

Question

我想知道什么是创建动态组件的最佳方法（性能）。我两者都尝试过，但我无法确定我应该使用哪一个。

在我的component.html容器中使用ng-switch

@Component({
  selector: 'app-component-container',
  template: `<div [ngSwitch]="typeComponent">
              <app-component-one *ngSwitchCase="1" [value]="someValue"></app-component-one>
              <app-component-two *ngSwitchCase="2" [value]="someValue"></app-component-two>
              <app-component-three *ngSwitchCase="3" [value]="someValue"></app-component-three>
              </div>`
})
export class ContainerComponent implements OnInit {
  private typeComponent: number;
  private someValue: string;
  constructor() {
    this.typeComponent = 2;
    this.someValue = "Hello";
  }
  ngOnInit() {
  }
}

或我的组件中的组件构建器。

@Component({
  selector: 'app-component-container',
  template: '<div #container></div>'
})
export class ContainerComponent implements OnInit {
  @ViewChild('container', {read: ViewContainerRef}) container: ViewContainerRef;
  private typeComponent: number;
  private someValue: string;
  constructor(private _resolver: ComponentFactoryResolver) {
    this.typeComponent = 2;
    this.someValue = "Hello";
  }
  ngOnInit() {
    let childComponent: ComponentRef<any> = null;
    switch (this.typeComponent) {
      case 1:
        childComponent = this.container.createComponent<ChildComponentOne>(this._resolver.resolveComponentFactory(ChildComponentOne));
        break;
      case 2:
        childComponent = this.container.createComponent<ChildComponentTwo>(this._resolver.resolveComponentFactory(ChildComponentTwo));
        break;
      case 3:
        childComponent = this.container.createComponent<ChildComponentThree>(this._resolver.resolveComponentFactory(ChildComponentThree));
        break;
    }
    if (childComponent != null) {
      childComponent.instance.value = this.someValue;
    }
  }
}

这很简单，在我的应用程序中，我对动态组件有巨大的影响。

预先感谢您的回答。

Answer 1

尽管这两种方式都是可行的，为了干燥，可读性和未来维护，我可能会走第二种方法 - 也就是说，通过API创建动态组件并将其插入容器的孩子...

您可以通过这种方式进一步降低代码中的重复：

ngOnInit() {
  let childComponentType: Type = null;
  switch (this.typeComponent) {
    case 1:
      childComponentType = ChildComponentOne;
      break;
    case 2:
      childComponentType = ChildComponentTwo;
      break;
    case 3:
      childComponentType = ChildComponentThree;
      break;
  }
  if (childComponentType != null) {
    let factory = this._resolver.resolveComponentFactory(childComponentType);
    let instance: ComponentRef<any> = this.container.createComponent(factory);
    childComponent.instance.value = this.someValue;
  }
}

您还可以将所有3个示例组件都继承一个公共基类，并在基类中具有您的常见属性，方法和@Output s。这样，当每个组件共享共同行为时，您可以读取值并订阅EventEmitter。

沿着这些行：

export class ChildComponentBaseClass {
  @Input() value;
}
@Component({...})
export class ChildComponentOne<ChildComponentBaseClass> {
  ...
}
@Component({...})
export class ChildComponentTwo<ChildComponentBaseClass> {
  ...
}
ngOnInit() {
  let childComponentType: Type = null;
  switch (this.typeComponent) {
    case 1:
      childComponentType = ChildComponentOne;
      break;
    case 2:
      childComponentType = ChildComponentTwo;
      break;
    case 3:
      childComponentType = ChildComponentThree;
      break;
  }
  if (childComponentType != null) {
    let factory = this._resolver.resolveComponentFactory(childComponentType);
    let instance: ComponentRef<ChildComponentBaseClass> = this.container.createComponent<ChildComponentBaseClass>(factory);
    // instance.value is now properly typed!
    childComponent.instance.value = this.someValue;
  }
}