Angular 4如何在父组件中阻止子组件arrowClicked函数后续执行？

首先得明确：Angular的EventEmitter触发的父组件回调，和子组件的后续代码是同步执行的，但return false在这里完全没用——这只是父组件回调的返回值，子组件根本不会去接收或处理它。既然不能修改子组件代码，我们有两个靠谱的方案：

方案一：通过ViewChild重写子组件方法 #

这是最直接的方式，父组件可以获取子组件实例，替换掉它的arrowClicked方法，从而完全控制执行逻辑：

1. 父组件中引入ViewChild并获取子组件实例：

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { ChildComponent } from './child.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
  @ViewChild(ChildComponent) childComponent!: ChildComponent;

  ngAfterViewInit() {
    // 保存子组件原有的方法，避免丢失上下文
    const originalArrowClicked = this.childComponent.arrowClicked.bind(this.childComponent);
    
    // 重写子组件的方法
    this.childComponent.arrowClicked = () => {
      // 先执行父组件的判断逻辑，返回是否允许子组件继续执行
      const allowChildExecution = this.funcBoo();
      
      if (allowChildExecution) {
        // 如果允许，调用子组件原来的方法
        originalArrowClicked();
      } else {
        // 如果不允许，直接跳过子组件的后续逻辑（包括alert）
        // 要是你还想保留emit事件，可以手动触发：
        // this.childComponent.onArrowClick.emit(null);
      }
    };
  }

  funcBoo(): boolean {
    alert("boo");
    return false; // 返回false即可阻止子组件后续代码执行
  }
}

这里的核心是我们接管了子组件的方法执行权，先完成父组件的判断逻辑，再决定要不要执行子组件原有的代码逻辑。

方案二：拦截DOM触发事件（适用于子组件方法由DOM事件触发的场景） #

如果子组件的arrowClicked是由DOM事件（比如按钮点击）触发的，我们可以在父组件里拦截这个DOM事件，从根源上阻止子组件方法执行：

假设子组件模板里有触发事件的按钮：

<button (click)="arrowClicked()">点击触发</button>

父组件可以在捕获阶段监听这个点击事件，阻止它继续传播：

1. 修改父组件模板：

<app-child (click)="handleChildClick($event)" capture></app-child>

2. 父组件添加事件处理方法：

handleChildClick(event: MouseEvent) {
  // 阻止事件继续传播，子组件的click事件不会被触发
  event.stopImmediatePropagation();
  event.preventDefault();
  
  // 执行父组件自己的逻辑
  this.funcBoo();
}

funcBoo(): void {
  alert("boo");
}

这个方案不需要修改子组件的方法逻辑，直接从DOM事件层面拦截，但前提是你清楚子组件方法是由哪个DOM事件触发的。

内容的提问来源于stack exchange，提问作者Yehuda Menahem