Question

我有一个有角度的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方法，但没有区别。

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

Answer 1

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

export class ChildComponent {
   _dataFromParent: any;

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

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

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

1 个答案: