Question

我有一个动态创建组件的服务（在我的示例中为对话框） -

  createDialog(component: Type, providers: any = []) {
    this._resolver.resolveComponent(component).then(factory => {
      let resolved = ReflectiveInjector.resolve(providers);
        let injector = ReflectiveInjector.fromResolvedProviders(resolved, this._container.injector);
        this._container.createComponent(factory, null, injector, []);        
    });
  }

但问题是，现在我需要为每个组件创建一个模板，其中包含md-dialog元素，并在ng-content内传递所需的dom元素，如下所示 -

  <md-dialog [displayActions]="false" class="warning">
    <div content>
      <h4> Warning
        <a href="close" (click)="close($event)"><i class="material-icons">close</i></a>
      </h4>
      <div>
        Some content
      </div>
      <button class="mdl-button mdl-js-button save" (click)="continue()">
        Continue
      </button>
    </div>
  </md-dialog>

但我想要的是将带有模板的对象传递给createDialog函数，并使用此模板创建组件，例如像这样 -

  class DialogTemplate {
    header: string;
    content: string;
    actions: string;
  }
  createDialog(component: Type, providers: any = [], template: DialogTemplate) {
    /*Some imaginary code*/
    component.template = `
      <md-dialog [displayActions]="false" class="warning">
        <div content>
        </div>
      </md-dialog>`;
    /*Imaginary code end*/
    this._resolver.resolveComponent(component).then(factory => {
      let resolved = ReflectiveInjector.resolve(providers);
        let injector = ReflectiveInjector.fromResolvedProviders(resolved, this._container.injector);
        this._container.createComponent(factory, null, injector, []);        
    });
  }

是否可以这样做，或类似的东西？如果是的话，有人可以将我链接到一个允许这样做或提供示例的API吗？

动态创建组件传递模板

0 个答案: