如何在父级中检测子组件上的模糊事件

Question

我正在进行角度项目，我在一个字段中有问题设置验证错误消息。 我想在触摸组件并且模型无效时设置错误类。

我试图在子组件的html中的子组件和事件上放置事件（模糊）。

<!--parent-->
<form #formGlobal="ngForm>
<child-component (modelChange)="syncWithHiden()" ></child-component>
<input type="hidden" #data="ngModel">
</form>

<!--child component-->
<form>
<ng-select></ng-select>
</form>

我想设置隐藏的输入#data脏或触摸当用户点击ng-select并留空值

Answer 1

从父项处理子项中发生的事件的最简单方法是在子事件中创建一个输出事件，该事件在您要处理的事件发生时发出，然后从父事件处理。

基本上，

child.ts

@Component({
  selector: 'child-component',
  template: `
    <form>
      <ng-select (blur)="internalEventHandler(data)">....</ng-select>
    </form>  
  `,
  styles: []
})

export class ChildComponent  {
  @Output() event = new EventEmitter();

  internalEventHandler = (dataToOutput: any) => this.event.emit(dataToOutput);
}

parent.ts

@Component({
  selector: 'parent-component',
  template: `
    <form #formGlobal="ngForm>
      <child-component (event)="handleChildEvent($event)"></child-component>
      <input type="hidden" #data="ngModel">
    </form>
  `,
  styles: []
})

export class ParentComponent  {
  handleChildEvent = (dataFromChild) => {
    //do stuff...
  }
}