角度事件未第二次触发

Question

我有一个问题。

为什么我第二次点击父组件没有触发事件？

例如，我有第一个父组件

<app-page>
 <div *ngFor="let object of objects$ | ngrxPush">
      <app-parent>
           <div class="add-button">
             <button  
               (click)="onAddBtnClick(object)"
               mat-icon-button
             >
             </button>
           </div>
     </app-parent>
     <app-child-container
           [viewChildContainer]="object.showChildContiner"
          (containerClickOutside)="onContainerClick(object)"
         >
     </app-child-container>  
  </div>
 </app-page>

在 .ts 文件中用于父项

onAddBtnClick(object: Object): void {
     object.showChildContiner = true;
}

onContainerClick(object): void {
     object.showChildContiner = false;
}

在子容器中

  <div class="child-container">
     <app-grandson-component
       *ngIf="viewChildContainer"
        (containerClickOutside)="containerClickOutside($event)"
        >
     </app-grandson-component>
  </div>

在child.ts中

   @Input() viewChildContainer: boolean;

   onGrandSonEmit(grandChildTextAreaText: string): void {
       this.containerClickOutside.emit(grandChildTextAreaText);
  }

在孙子里

 <div (focusout)="onFocusOut()">
      <textarea
         matInput
         cdkTextareaAutosize
         #autosize="cdkTextareaAutosize"
         #textarea
         [(ngModel)]="textareaText"
       ></textarea>
  </div>

在grandson.ts中

 @ViewChild('textarea', { static: false }) textarea: ElementRef;
 @Output() onGrandSonEmit: EventEmitter<any> = new EventEmitter();

 noteText: string;

 onFocusOut(): void {
    this.onGrandSonEmit.emit(this.textarea.nativeElement.value);
   }
 }

场景

我第一次点击父组件的onAddBtnClick，子组件和孙子组件进入视图。

我第二次点击 onAddBtnClick 时，它会从孙子组件调用 focusOut，直到父组件发出一切，但不会触发 onAddBtnClick 的事件。

任何想法， 非常感谢。

Answer 1

如果您正在编辑的文本区域位于您在第二次单击时单击的添加按钮上方， 编辑 textarea 的 'focusOut' 事件将隐藏 textarea，因此，您点击的按钮在点击之前直接向上移动。

因此，您的“点击”不是转到添加按钮，而是转到您单击时“添加按钮”所在的位置。

但是，如果您单击编辑文本区域顶部的添加按钮，它将起作用（调用 onAddBtnClick），因为单击的按钮不会被移动。

可能的解决方案：您可以仅使用“onAddBtnClick”函数并将“showChildContiner”设置为除单击对象之外的所有对象，而不是使用“focusOut”事件。 （仅当您可以将它们存储在控制器中而不是直接使用 observable 时）。