我正在角度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);
})
}
}
我想触发模板网址中的操作,如下所示:我在哪里以及如何处理此点击事件。 的 e.component.html
<div>
<button (click)="action()"></button>
<h1 (click)="action()">Phrase</h1>
</div>
答案 0 :(得分:0)
您需要在动态组件类中创建方法。
const tmpCmp = Component({moduleId: module.id, templateUrl: './e.component.html'})(class {
action(){
console.log('Action button clicked');
}
});
答案 1 :(得分:0)
我认为我们可以通过在此调用中添加变量来实现此目的。
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。