动态创建组件传递模板

时间:2016-07-05 13:45:29

标签: javascript html typescript angular

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

  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 个答案:

没有答案