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.ts容器中的组件构建器

@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创建动态组件并将其作为容器的子项插入...... / p>

您可以通过以下方式进一步减少代码中的重复：

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。这样，当每个组件共享一个共同的行为时，您可以读取值并订阅EventEmitters。

这些方面的东西：

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;
  }
}

Angular2动态组件的最佳方式

1 个答案: