У меня есть страница с гривой, в которой есть кнопка, которая вызывает всплывающее окно:

  <i class="material-icons" (click)="openPopUp()">info</i>

OpenPopUp () просто устанавливает для свойства значение true:

openPopUp() {
    this.showPopup = true;
  }

И затем я отправляю значение showPopUp в PopupComponent (его отдельный компонент):

<div *ngIf="showPopup === true">
  <pop-up-info-box [componentBPopUp]="showPopup"></pop-up-info-box>
</div>

Но теперь в компоненте B у меня есть функция closePopUp, которая запускается из HTML:

И просто устанавливает для componentBPopUp значение false:

 @Input
  public componentBPopUp: boolean;

  public closePopUp() {
    this.popUp = false;
  }

Но что на самом деле нужно установить в false, это showPopup в первом компоненте ... как правильно установить его значение?

Спасибо

0
JohnBigs 7 Янв 2017 в 20:21

3 ответа

Лучший ответ

Вы должны использовать @Output в компоненте PopUp.

Например:

  close(){
    this.showPopup = false;
  }

Пример того, что вы пытаетесь сделать:

https://plnkr.co/edit/kUWrlnoXgJ15rXObdaqh?p=preview

Удачи!!!

2
YairTawil 7 Янв 2017 в 20:52

На ваш вопрос родительский компонент может ссылаться на дочерний компонент с помощью @ViewChild декоратор

@ViewChild('popup')
popup: ModalComponent;

this.popup.doStuff();

<div  *ngIf="showPopup === true">
  <pop-up-info-box #popup [componentBPopUp]="showPopup"></pop-up-info-box>
</div>

Но ваша конкретная проблема может быть решена с помощью двусторонней привязки данных между componentBPopUp и полем showPopup (см. здесь )

Другим вариантом является использование EventEmmiter для уведомления другого компонента об изменении (см. здесь )

0
Boaz 7 Янв 2017 в 17:34

Что вы должны сделать в ComponentB - это вызвать событие при закрытии.

@Output() onClose: EventEmitter<boolean> = new EventEmitter();


public closePopUp() {
    this.onClose.emit(true);
}

Теперь на родителя просто подпишитесь на это событие:

<div *ngIf="showPopup === true">
  <pop-up-info-box [componentBPopUp]="showPopup" (onClose)="showPopup = false">   
  </pop-up-info-box>
</div>
2
Chandermani 7 Янв 2017 в 17:31