web-dev-qa-db-ja.com

Angular 2で動的に作成されたコンポーネントの@Inputおよび@Outputを処理します

Angular 2で動的に作成されたコンポーネントの@Inputおよび@Outputプロパティを処理/提供する方法は？

アイデアは、SubComponentをcreateSubメソッドが呼び出されます。フォークは問題ありませんが、SubComponentの@Inputプロパティにデータを提供するにはどうすればよいですか。また、サブコンポーネントが提供する@Outputイベントを処理/サブスクライブする方法は？

例：（両方のコンポーネントが同じNgModuleにあります）

AppComponent

@Component({
  selector: 'app-root'
})  
export class AppComponent {

  someData: 'asdfasf'

  constructor(private resolver: ComponentFactoryResolver, private location: ViewContainerRef) { }

  createSub() {
    const factory = this.resolver.resolveComponentFactory(SubComponent);
    const ref = this.location.createComponent(factory, this.location.length, this.location.parentInjector, []);
    ref.changeDetectorRef.detectChanges();
    return ref;
  }

  onClick() {
    // do something
  }
}

SubComponent

@Component({
  selector: 'app-sub'
})
export class SubComponent {
  @Input('data') someData: string;
  @Output('onClick') onClick = new EventEmitter();
}
javascriptangularangular2-routingangular2-template
32
thpnk

コンポーネントを作成するときに簡単にバインドできます。

_createSub() {
    const factory = this.resolver.resolveComponentFactory(SubComponent);
    const ref = this.location.createComponent(factory, this.location.length, this.location.parentInjector, []);
    ref.someData = { data: '123' }; // send data to input
    ref.onClick.subscribe( // subscribe to event emitter
      (event: any) => {
        console.log('click');
      }
    )
    ref.changeDetectorRef.detectChanges();
    return ref;
  }
_

データの送信は非常に簡単です。_ref.someData = data_を実行します。ここで、dataは送信するデータです。

出力からのデータの取得も非常に簡単です。これは、単にEventEmitterをサブスクライブすることができるため、コンポーネントからの値をemit()するたびに、渡したClojureが実行されるためです。

4
Ante Jablan Adamović
createSub() {
  const factory = this.resolver.resolveComponentFactory(SubComponent);
  const ref = this.location.createComponent(factory, this.location.length, 
  ref.instance.model = {Which you like to send}
  ref.instance.outPut = (data) =>{ //will get called from from SubComponent} 
  this.location.parentInjector, []);
  ref.changeDetectorRef.detectChanges();
return ref;
}

SubComponent{
 public model;
 public outPut = <any>{};  
 constructor(){ console.log("Your input will be seen here",this.model) }
 sendDataOnClick(){
    this.outPut(inputData)
 }    
}
0
ayyappa maddi

文字列からその場でコンポーネントを生成する次のコードを見つけ（ angular2は単に文字列からコンポーネントを生成する ）、そこからcompileBoundHtmlディレクティブを作成し、入力データを渡します（出力は処理しませんが、私は同じ戦略が適用されると思うので、これを変更できます）：

    @Directive({selector: '[compileBoundHtml]', exportAs: 'compileBoundHtmlDirective'})
export class CompileBoundHtmlDirective {
    // input must be same as selector so it can be named as property on the DOM element it's on
    @Input() compileBoundHtml: string;
    @Input() inputs?: {[x: string]: any};
    // keep reference to temp component (created below) so it can be garbage collected
    protected cmpRef: ComponentRef<any>;

    constructor( private vc: ViewContainerRef,
                private compiler: Compiler,
                private injector: Injector,
                private m: NgModuleRef<any>) {
        this.cmpRef = undefined;
    }
    /**
     * Compile new temporary component using input string as template,
     * and then insert adjacently into directive's viewContainerRef
     */
    ngOnChanges() {
        class TmpClass {
            [x: string]: any;
        }
        // create component and module temps
        const tmpCmp = Component({template: this.compileBoundHtml})(TmpClass);

        // note: switch to using annotations here so coverage sees this function
        @NgModule({imports: [/*your modules that have directives/components on them need to be passed here, potential for circular references unfortunately*/], declarations: [tmpCmp]})
        class TmpModule {};

        this.compiler.compileModuleAndAllComponentsAsync(TmpModule)
          .then((factories) => {
            // create and insert component (from the only compiled component factory) into the container view
            const f = factories.componentFactories[0];
            this.cmpRef = f.create(this.injector, [], null, this.m);
            Object.assign(this.cmpRef.instance, this.inputs);
            this.vc.insert(this.cmpRef.hostView);
          });
    }
    /**
     * Destroy temporary component when directive is destroyed
     */
    ngOnDestroy() {
      if (this.cmpRef) {
        this.cmpRef.destroy();
      }
    }
}

重要な変更は、以下の追加です。

Object.assign(this.cmpRef.instance, this.inputs);

基本的には、新しいコンポーネントに含める値をtmpコンポーネントクラスにコピーして、生成されたコンポーネントで使用できるようにします。

それは次のように使用されます：

<div [compileBoundHtml]="someContentThatHasComponentHtmlInIt" [inputs]="{anInput: anInputValue}"></div>

うまくいけば、これによって誰かが私がしなければならなかった大量のグーグルを救うことができます。

0
William Neely