首页 文章

儿童及其子女未被重新渲染

提问于
浏览
0

我有一个角度为5的父组件,其模板看起来像

<parent-component>
<child-component [data-from-parent]='data'> </child-component>
<button (click)="updateChildData()"></button>
</parent-component/>

子组件和父组件是

@Component({   
    selector: 'child-component',
    styles: [`
    `] 
    templateUrl: './child.component.html'
})
export class ChildComponent {
   @Input() data-from-parent: any; 
   ...
}

@Component({   
    selector: 'parent-component',
    styles: [`
    `] 
    templateUrl: './parent.component.html'
})
export class ParentComponent {
   data: any;
   ...
   updateChildData() {
      this.data = JsonDataFromARestCall();
   }
}

子组件本身由4或5个子组件组成 .

来自父输入的数据是json,它通过父进程的休息调用来检索 . 这个json包含几个键值,子组件和它自己的子组件使用它们作为进行其他休息调用的参数 .

每当父组件更新数据时,我检查了子项的ngOnChanges()被调用,但子项及其子项都没有被重新呈现 .

我试图在子进程中注入ChangeDetectorRef并在ngOnChanges中调用它的detectChanges方法,但它没有任何区别 .

每次输入绑定数据发生变化时,整个子组件及其子组件是否都不能重新呈现?

1 回答

  • 1

    您可以使用setter拦截输入属性更改 . 假设 data 的类型是一个对象,请将您的子组件更改为以下内容,

    export class ChildComponent {
       _dataFromParent: any;
    
       @Input('data-from-parent') set dataFromParent(data: string) {
          this._dataFromParent= data;
       };
       ...
    }
    

    现在,您可以在子组件中使用 _dataFromParent

相关问题