Angular 7中子组件修改父组件变量实现模态框隐藏

这个场景在Angular开发里太常见了——@Input是单向绑定，子组件只能读取父组件传过来的值，没法直接修改，强行改不仅不会同步回父组件，还可能触发变更检测的问题。不过咱们可以通过子组件触发事件，父组件自己修改属性的方式来实现关闭模态框的需求，这是Angular父子组件通信的标准方案。

步骤1：子组件添加@Output事件发射器 #

首先在你的子组件里，定义一个@Output事件，用来通知父组件“要关闭模态框了”：

1. 先导入需要的模块：

import { Component, Input, Output, EventEmitter } from '@angular/core';

2. 声明@Input和@Output：

@Component({
  selector: 'app-your-child-component',
  templateUrl: './your-child-component.component.html'
})
export class YourChildComponent {
  @Input() displayPopup: boolean;
  // 定义一个事件发射器，用来通知父组件关闭弹窗
  @Output() onClosePopup = new EventEmitter<void>();

  // 按钮点击时触发这个方法，发射事件
  handleClose() {
    this.onClosePopup.emit();
  }
}

3. 子组件模板里的隐藏按钮绑定点击事件：

<button (click)="handleClose()">隐藏模态框</button>
<!-- 你的模态框内容，用displayPopup控制显示隐藏 -->
<div *ngIf="displayPopup" class="modal">...</div>

步骤2：父组件绑定子组件的事件 #

接下来在父组件的模板里，给子组件标签绑定这个onClosePopup事件，当事件触发时，直接把父组件的displayPopup设为false：

<!-- 父组件模板里的子组件标签 -->
<app-your-child-component 
  [displayPopup]="displayPopup"
  (onClosePopup)="displayPopup = false"
></app-your-child-component>

如果后续关闭逻辑需要扩展（比如加动画、清理数据），也可以在父组件里写个方法，再绑定到事件上：

// 父组件的ts代码
displayPopup = true;

closeModal() {
  // 这里可以加额外逻辑，比如清理表单数据
  this.displayPopup = false;
}

然后模板里改成：

<app-your-child-component 
  [displayPopup]="displayPopup"
  (onClosePopup)="closeModal()"
></app-your-child-component>

额外小技巧：双向绑定语法糖 #

如果你的场景需要频繁在父子组件间同步这个值，也可以用Angular的双向绑定语法糖。只需要把子组件的@Output命名为displayPopupChange（必须和@Input的名字加Change后缀）：

// 子组件里修改@Output的名字
@Input() displayPopup: boolean;
@Output() displayPopupChange = new EventEmitter<boolean>();

handleClose() {
  this.displayPopupChange.emit(false);
}

然后父组件里可以直接用双向绑定：

<app-your-child-component [(displayPopup)]="displayPopup"></app-your-child-component>

这样就不用手动绑定事件了，本质上还是@Input+@Output的组合，只是Angular帮你简化了写法。

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