Angular2最佳动态组件的方式

Question

Angular2最佳动态组件的方式

3

我希望了解创建动态组件的最佳方式（性能）。我尝试过两种方法，但无法确定应该使用哪一种。

在我的组件.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;
    }
  }
}

这只是一个简单的例子，在我的应用程序中有大量嵌套的动态组件。非常感谢各位的回答。

- Soulm8

在我的第二个例子中，很酷的事情是我可以在我的childComponent上拥有一个实例，我可以轻松地操作该实例并调用方法。在我看来，这是更面向对象的方式。 - Soulm8

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- David M. · Accepted Answer

尽管这两种方式都可行，但为了保持DRY（不重复原则）、易读性和未来维护的考虑，我可能会选择第二种方式——通过 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;
  }
}

你也可以让你的三个示例组件继承一个公共基类，并在基类中设置公共属性、方法和@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;
  }
}