Question

我正在使用angular7。并且我有下面的stackblitz这样的子组件。但是，我可以通过@Input访问父控件上的变量，但不能更改。我该如何在下面的stackblitz中执行此操作？ 我的目标是通过在隐藏按钮单击时设置displayPopup = false来隐藏模式

STACKBLITZ

Answer 1

您需要的是EventEmitter上的popup.component.ts

这是一个有效的示例：

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

@Component({
  selector: 'app-popup',
  templateUrl: './popup.component.html',
  styleUrls: ['./popup.component.css']
})
export class PopupComponent {

  @Output() public hide: EventEmitter<void> = new EventEmitter();

  hideModal() {
      this.hide.emit();
  }
}

然后在父级上可以订阅该事件，如下所示：

<app-popup *ngIf="displayPopup" (hide)="displayPopup = false;"></app-popup>

Answer 2

您可以使用自定义双向绑定，例如this stackblitz：

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

@Component({
  selector: 'app-popup',
  templateUrl: './popup.component.html',
  styleUrls: ['./popup.component.css']
})
export class PopupComponent implements OnInit {

  private _bool: boolean;
  @Output() boolChange = new EventEmitter();

  set bool(value) { this._bool = value; this.boolChange.emit(value); }
  @Input() get bool() { return this.bool; }

  constructor() { }

  ngOnInit() {
  }

  hideModal() {
  this.bool = false;
  }
}

在角度7中更改父组件中的变量

2 个答案: