父组件打开时需要检测子组件中的任何更改

时间:2019-11-07 07:18:22

标签: angular angular8

我想检测我是否在子组件中进行了任何更改,然后父组件应该知道这些更改。

所以我在子组件中有一些文本编辑器,当我在该文本编辑器中进行任何更改时,父组件应该对此有所了解。

我尝试过的代码:

父组件:

@ViewChildren(EditorComponent) editor: EditorComponent;

ngAfterViewChecked(){
  console.info(this.editor.isDirty);
}

但这总是返回undefined

在子组件中,我默认提到isdirty为false。

能否请您指导我如何进行此操作。

2 个答案:

答案 0 :(得分:0)

您可以使用@Output Decorator将数据从子组件发送到父组件。

在子组件中创建一个事件发射器,并将该值传递给事件发射器。

 @Output() childValueChange = new EventEmitter();

 this.childValueChange.emit(value);

在父组件中 HTML

<app-parent-component (childValueChange)='save($event)'></app-parent-component>

Component.ts

save(event){
  // Here you will get  the value which child has emitted
  console.log(event);
}

答案 1 :(得分:0)

您可以使用@ViewChild

@ViewChild(EditorComponent) editor: EditorComponent;

Online Demo