Question

我正在开发一个项目，我需要根据我的端点响应显示不同的模板/组件。

例如

{data: {type: 1, textToDisplay: 'I want beans'} }

应将组件1注入主app模板。

如果数据是

{data: {type: 2, textToDisplay: 'I want cheese', numberToDisplay: '101' } }

应将组件2注入主app模板，当然组件2与组件1不同，因为它有额外的属性。

我真的不想通过将元素附加到主应用模板中来使用不良做法，也不想用[if]指令编写大量模板，因为我们可能有许多5-8个不同的组件渲染，它会使模板膨胀。

什么是合适的方式？

Answer 1

正如@Günter所提到的，你可以使用DynamicComponentLoader

@Component({
  selector: 'my-app',
  template: `<button (click)="addCmp()" #theBody>add</button>
  `,
  directives: [BaseDynamicComponent]
})
export class AppComponent {
  @ViewChild('theBody', {read: ViewContainerRef}) theBody;
  cmp:ComponentRef;

  constructor(injector: Injector,private resolver: ComponentResolver) {}

  addCmp(data){
    console.log('adding');
    this.resolver.resolveComponent(BaseDynamicComponent).then((factory:ComponentFactory<any>) => {
      this.cmp = this.theBody.createComponent(factory);
      //and you can set your BaseDynamicComponent's 'extra' properties here
      this.cmp.instance.numberToDisplay = data.numberToDisplay;
    });
  }
  }

这将在#theBody元素下添加BaseDynamicComponent。

这是一个例子plunkr：

Plunker

如果单击“添加”按钮，它将添加一个新组件，其测试字段分配给“测试”

this.cmp.instance.test = "the test";

或者您可以预先定义@Günter的答案（https://stackoverflow.com/a/36325468/5706293）中的组件，然后相应地附加它们

我想根据Angular 2

1 个答案: