动态创建组件的动作检测

Question

我正在 angular 4 中创建一个动态创建的组件，如下所示。

    import {
  Compiler, Component, Injector, VERSION, ViewChild, NgModule, NgModuleRef,
  ViewContainerRef
} from '@angular/core';


@Component({
  selector: 'my-app',
  template: `
      <h1>Hello {{name}}</h1>
      <ng-container #vc></ng-container>
  `
})
export class AppComponent {
  @ViewChild('vc', {read: ViewContainerRef}) vc;
  name = `Angular! v${VERSION.full}`;

  constructor(private _compiler: Compiler,
              private _injector: Injector,
              private _m: NgModuleRef<any>) {
  }

  ngAfterViewInit() {
    const tmpCmp = Component({
        moduleId: module.id, templateUrl: './e.component.html'})(class {
    });
    const tmpModule = NgModule({declarations: [tmpCmp]})(class {
    });

    this._compiler.compileModuleAndAllComponentsAsync(tmpModule)
      .then((factories) => {
        const f = factories.componentFactories[0];
        const cmpRef = f.create(this._injector, [], null, this._m);
        cmpRef.instance.name = 'dynamic';
        this.vc.insert(cmpRef.hostView);
      })
  }
}

我想从模板 url 触发一个动作，如图 below:Where 以及如何处理这个点击事件。 e.component.html

<div>
  <button  (click)="action()"></button>
  <h1 (click)="action()">Phrase</h1>  
</div>

Answer 1

您需要在动态组件中创建方法class。

const tmpCmp = Component({moduleId: module.id, templateUrl: './e.component.html'})(class {

                 action(){
                     console.log('Action button clicked');
                 }

               });

Answer 2

我认为我们可以通过在此调用中添加变量来简单地实现这一点。

const tmpCmp = Component({moduleId: module.id, templateUrl: './e.component.html'})(class {

             componentVar = this.parentComponentVar; // or simpleVar passed in function.
             action(){
                 console.log('Action button clicked');
             }

           })

如果有效请告诉我，否则我会创建一个 jsfiddle。

动态创建组件的动作检测

Action Detection on dynamically created component

angular2-changedetection

angular