Angular 2 : Load component dynamically with parameters @Input and @Output

Question

目前我正在使用这段代码动态加载我的一些组件。

export class ComponentOutlet {

    constructor(
        private vcRef: ViewContainerRef,
        private compiler: Compiler,
        private dataService: DataService
    ) { }

    private _createDynamicComponent() {

        // Some logic to decide which component should be loaded
        return MyComponent;
    }


    ngOnChanges() {

        this.compiler.compileComponentAsync(this._createDynamicComponent())
            .then(factory => {
                const injector = ReflectiveInjector.fromResolvedProviders([], this.vcRef.parentInjector);
                this.vcRef.clear();
                this.vcRef.createComponent(factory, 0, injector);
            });
    }

问题是 MyComponent 有一些 @Input 和 Output 绑定(bind)。可以在这里设置这个绑定(bind)吗？我怎样才能做到这一点？

Answer 1

输入和输出的绑定(bind)只能用于静态添加到另一个组件模板的组件。

在你的情况下，你可以命令式地做

 var cmpRef = this.vcRef.createComponent(factory, 0, injector);
 cmpRef.instance.someInput = value;
 cmpRef.instance.someOutput.subscribe(data => this.data = data);