如何在更改检测后重置 angular2 中的 ViewContainerRef？

Question

所以我正在开发这个应用程序，我在其中使用了 ViewContainerRef 和 dynamicComponentLoader，如下所示：

generic.component.ts

export class GenericComponent implements OnInit, OnChanges{
    @ViewChild('target', { read: ViewContainerRef }) target;
    @Input('input-model') inputModel: any = {};
    constructor(private dcl: DynamicComponentLoader) { }
    ngAfterViewInit() {            
        this.dcl.loadNextToLocation(DemoComponent,this.target)
            .then(ref => {
                if (this.inputModel[this.objAttr] === undefined) {
                    ref.instance.inputModel = this.inputModel;
                } else {
                    ref.instance.inputModel[this.objAttr] = this.inputModel[this.objAttr];                        
                }
            });
            console.log('Generic Component :===== DemoComponent===== Loaded');
    }

   ngOnChanges(changes) {
       console.log('ngOnChanges - propertyName = ' + JSON.stringify(changes['inputModel'].currentValue));
       this.inputModel=changes['inputModel'].currentValue;                
   }
}

generic.html

<div #target></div>

所以它正确地呈现 DemoComponentin target 元素。

但是当我更改 inputModel 时，我想重置目标元素的视图。

我尝试 onOnChanges 重置 inputModel ，它得到了正确的更改，但是视图没有针对相应的更改进行更新。

所以我想知道是否可以在 inputModel 更新后重置 ngOnChanges 内的视图？

有任何输入吗？

Answer 1

this.inputModel和ref.instance.inputModel之间没有联系。如果有变化需要重新复制。

例如：

export class GenericComponent implements OnInit, OnChanges{
    componentRef:ComponentRef;

    @ViewChild('target', { read: ViewContainerRef }) target;
    @Input('input-model') inputModel: any = {};
    constructor(private dcl: DynamicComponentLoader) { }
    ngAfterViewInit() {            
        this.dcl.loadNextToLocation(DemoComponent,this.target)
            .then(ref => {
                this.componentRef = ref;
                this.updateModel();
            });
            console.log('Generic Component :===== DemoComponent===== Loaded');
    }

 
    updateModel() {
        if(!this.componentRef) return;

        if (this.inputModel[this.objAttr] === undefined) {
            this.componentRef.instance.inputModel = this.inputModel;
        } else {
            this.componentRef.instance.inputModel[this.objAttr] = this.inputModel[this.objAttr];                        
        }
    }

   ngOnChanges(changes) {
       console.log('ngOnChanges - propertyName = ' + JSON.stringify(changes['inputModel'].currentValue));
       this.inputModel=changes['inputModel'].currentValue;                
       this.updateModel();
   }
}

如何在更改检测后重置 angular2 中的 ViewContainerRef？

How to reset ViewContainerRef in angular2 after change Detection?

javascript

typescript

angular2-template

angular