Angular 2：使用@Input和@Output参数动态加载组件

发布时间：2020-12-17 07:31:01 所属栏目：安全来源：网络整理

导读：目前我正在用这段代码动态加载我的一些组件. export class ComponentOutlet { constructor( private vcRef: ViewContainerRef,private compiler: Compiler,private dataService: DataService ) { } private _createDynamicComponent() { // Some logic to de

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

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,injector);
            });
    }

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

对输入和输出的绑定只能用于静态添加到另一个组件模板的组件.

在你的情况下,你可以这样做

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!