Изменить переменную в родительском компоненте на угловой 7

Question

Я использую угловой 7. И у меня есть дочерний компонент, как показано ниже: stackblitz.Но я могу получить доступ к своей переменной в родительском контроле с помощью @Input, но не могу измениться.Как я могу сделать это в ниже стекаблиц? Моя цель - скрыть модал с помощью set 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;
  }
}