Angular 4コンポーネントのテンプレートを動的に変更する

Question

Angular 4.1を使用して、モジュールのレンダリング前にモジュールタイプのテンプレートを動的に変更しようとしています。これは可能ですか？

既知のコンポーネントタイプのリストからページ上に不明な数のコンポーネントをブートストラップしています。ページには同じタイプの複数のコンポーネントが含まれている可能性があります。私はこれらのコンポーネントのそれぞれに異なるセレクタを与える方法を見つけました。（たとえ同じ型であっても）別々にレンダリングできるようになりましたが、それぞれに別のテンプレートを与える必要もあります。 テンプレートは、選択した要素の内部HTMLである必要があります。

import { Component, NgModule, Inject, ApplicationRef, ComponentFactoryResolver, OpaqueToken, Type } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { MyNavComponent } from './MyNav.component'; 
import { MyRotatorComponent } from './MyRotator.component'; 
import { MySignUpComponent } from './MySignUp.component'; 

export const BOOTSTRAP_COMPONENTS_TOKEN = new OpaqueToken('bootstrap_components'); 

@NgModule({ 
    imports: [BrowserModule], 
    declarations: [ 
     MyNavComponent, 
     MyRotatorComponent, 
     MySignUpComponent 
    ], 
    entryComponents: [ 
     MyNavComponent, 
     MyRotatorComponent, 
     MySignUpComponent 
    ], 
    providers: [ 
     { 
      provide: BOOTSTRAP_COMPONENTS_TOKEN, 
      useValue: [ 
       { type: MyNavComponent }, 
       { type: MyRotatorComponent }, 
       { type: MySignUpComponent } 
      ] 
     }, 
    ] 
}) 
export class AppModule { 
    constructor(
     private resolver: ComponentFactoryResolver, 
     @Inject(BOOTSTRAP_COMPONENTS_TOKEN) private components: [Component], 
    ) { } 
    ngDoBootstrap(appRef: ApplicationRef) { 
     console.log(this.components); 
     this.components.forEach((componentDef: { type: Type<any>, selector: string }) => { 
      const factory = this.resolver.resolveComponentFactory(componentDef.type); 
      let selector = factory.selector; 
      let nodes = document.querySelectorAll(selector); 
      for (let i = 0; i < nodes.length; i++) { 
       let node = nodes[i]; 
       (<any>factory).factory.selector = node; 

       //The next line doesn't work... how can I dynamically set the template? 
       (<any>factory).factory.template = node.innerHTML; 

       appRef.bootstrap(factory); 
      } 
     }); 
    } 
} 

上記のコードの最後の方で述べたように、(<any>factory).factory.template = node.innerHTML;は動作しません：

ここではコードです。私もタイプのメタデータを変更しようとしましたが、それはうまくいきません。

達成しようとしていることは別の手段で可能ですか？そうでない場合、これは機能要求として提出する価値がありますか？

は、（注：上記のコードはhttps://github.com/angular/angular/issues/7136で他人のコードに基づいている。）

更新：

角度の将来のアップデートでは、私はにできるようになります場合、私は思ったんだけどテンプレートを<ng-content></ng-content>に設定して、選択した要素のinnerHTMLを含めることで、同じ結果が得られます。ブートストラップされたコンポーネントでこれを行うことはできませんが、このissue on Gitに基づいて、私はすぐにそれが可能になると期待しています。

Answer 1

コンポーネントファクトリを作成した後でテンプレートを設定することはできません。角度コンパイラは、ファクトリを生成するときにテンプレートを解析し、各コンポーネントのビュークラスを作成します。コンポーネントファクトリとそのビュークラスを作成した後は、変更することはできません。あなたの例では、既に作成された工場を返す、ComponentFactoryResolver

const factory = this.resolver.resolveComponentFactory(componentDef.type); 

を使用しています。

唯一のオプションは、コンパイラがファクトリを生成する前にテンプレートを変更することです。しかし、私はそれが可能だとは思わない。おそらく、コンポーネントの動的生成を調べる必要があります。

詳細については、Here is what you need to know about dynamic components in Angularを参照してください。