ComponentFactoryResolver

ComponentFactoryResolverはコンポーネントを複製するためのClassです。

ComponentFactoryResolverという静的メソッドがあり、引数にコンポーネントclassを指定することで、コンポーネントを複製して生成するネントファクトリーを生成します。

以下のサンプルではSampleComponentを複製して配置していっています。

import {
  Component,
  ComponentFactoryResolver,
  ViewContainerRef
} from '@angular/core';
 
@Component({
  selector: 'sample-component',
  template: `
    <div>{{_no}}create<button (click)="onClick()">+</button></div>
`,
})
export class SampleComponent{
  _no:number
  public set no(value: number)
  {
    this._no = value;
  }
  onClick(){
    this._no++;
  }
}
 
@Component({
  selector: 'app-root',
  template: `
  <button (click)="onClick()">CREATE</button>
`,
})
export class ComponentFactoryComponent {
  private num:number=0;
  constructor(
    private cfr: ComponentFactoryResolver,
    private vcr: ViewContainerRef
  ) {
  }
  onClick() {
    const cf = this.cfr.resolveComponentFactory(SampleComponent);
    const componentRef = this.vcr.createComponent(cf);
    componentRef.instance.no = ++this.num;
  }
}

参考URL

ComponentFactoryResolver Class - Angular

登録日 : 2017年01月28日最終更新日 : 2017年1月29日

Angularリファレンス

ComponentFactoryResolver

参考URL

同じカテゴリー(@angular/core)のエントリー

検索

スポンサードリンク

バージョン

リファレンス