创建动态组件后，调用componentRef.instance不能更新界面数据

Question

发现在动态组件创建后，使用动态组件的实例（componentRef.instance）去改变动态组件的属性，如：
componentRef.instance.xxx="123"
界面上的绑定的{{xxx}}，不会更新
但控制台输出得知，其中的xxx确实已经变更。
而直接在动态组件类中使用函数，可以改变xxx，且{{xxx}}实时更新了。
如果才能让使用componentRef时，绑定的数据实时更新呢？

Answer 1

亲测有效，唯一无效的一点是覆盖 instance 的值不会触发 OnChanges 钩子。

@Component({
    template: `
        我是测试模板 {{data}}
    `
})
export class CustomComponent implements OnInit {
    @Input() public data: string;
    public ngOnInit() {
        console.log(this.data);
        setTimeout(() => {
            console.log(this.data);
        }, 3000);
    }
}

export class HomeComponent implements OnInit {
    constructor(
        private viewContainerRef: ViewContainerRef,
        private cfr: ComponentFactoryResolver
    ) {}
    public ngOnInit() {
        let factory = this.cfr.resolveComponentFactory(CustomComponent);
        let componentRef = this.viewContainerRef.createComponent(factory);
        componentRef.instance.data = 'hello';
        setTimeout(() => {
            componentRef.instance.data = 'bye';
        }, 2000);
    }
}