typescript 使用 ComponentResolver 动态创建 Angular 2 组件时传递输入
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37487977/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Passing Input while creating Angular 2 Component dynamically using ComponentResolver
提问by Madhu Ranjan
I am able to load a dynamic Angular 2 component using ComponentResolver and ViewContainerRef.
我能够使用 ComponentResolver 和 ViewContainerRef 加载动态 Angular 2 组件。
However I am not able to figure out how to pass any input variable of child component into this.
但是我无法弄清楚如何将子组件的任何输入变量传递给它。
parent.ts
父母.ts
@Component({
selector: "parent",
template: "<div #childContainer ></div>"
})
export class ParentComponent {
@ViewChild("childContainer", { read: ViewContainerRef }) childContainer: ViewContainerRef;
constructor(private viewContainer: ViewContainerRef, private _cr: ComponentResolver) {}
loadChild = (): void => {
this._cr.resolveComponent(Child1Component).then(cmpFactory => {
this.childContainer.createComponent(cmpFactory);
});
}
}
child1
孩子1
@Component({
selector: "child1",
template: "<div>{{var1}}</div><button (click)='closeMenu()'>Close</button>"
})
export class Child1Component {
@Input() var1: string;
@Output() close: EventEmitter<any> = new EventEmitter<any>();
constructor() {}
closeMenu = (): void => {
this.close.emit("");
}
}
so in above example say loadChildis being called on a button click, I am able to load Child1Component, but how to pass var1Input of child?
Also How to subscribe to closeEventEmitter decorated with @Output
所以在上面的例子中说loadChild在单击按钮时被调用，我能够加载 Child1Component，但是如何传递var1孩子的输入？还有如何订阅close装饰有的 EventEmitter@Output
回答by Günter Z?chbauer
You have to pass it imperatively like:
您必须像以下命令一样传递它：
loadChild(): void {
this._cr.resolveComponent(Child1Component).then(cmpFactory => {
let cmpRef = this.childContainer.createComponent(cmpFactory);
cmpRef.instance.var1 = someValue;
});
}
also similar with registering handlers for outputs.
也类似于为输出注册处理程序。
loadChild(): void {
this._cr.resolveComponent(Child1Component).then(cmpFactory => {
let instance: any = this.childContainer.createComponent(cmpFactory).instance;
if (!!instance.close) {
// close is eventemitter decorated with @output
instance.close.subscribe(this.close);
}
});
}
close = (): void => {
// do cleanup stuff..
this.childContainer.clear();
}
回答by S.Galarneau
This is how I did it with Angular 2.2.3
这就是我用 Angular 2.2.3 做的
let nodeElement = document.getElementById("test");
let compFactory = this.componentFactoryResolver.resolveComponentFactory(AnyCustomComponent);
let component = compFactory.create(this.viewContainerRef.injector, null, nodeElement);
// This is where you pass the @Input
component.instance.anyInput = anyInput;
