Как правильно заставить работать кнопку закрытия NbAlertComponent (закрыть предупреждение)

Question

Я использую Nebular для своего проекта, и не могу узнать, как получить close button NbAlertComponent для фактического закрытия оповещения. Закрывая, я имею в виду, чтобы перестать показывать после нажатия на close button, Я прочитал документацию о компонентах оповещения, но не нашел ответа. Компонент оповещения может иметь свойство closable, который добавляет кнопку закрытия, и может иметь обработчик события при нажатии на него (close)="onClose()", Я использую это так (угловой 6):

// page.component.html
<nb-alert status="success" closable (close)="onClose()">
  You have been successfully authenticated!
</nb-alert>

В page.component.ts, если у меня есть метод onClose, он срабатывает каждый раз, когда я нажимаю на предупреждение close button а как на самом деле его закрыть?

// page.component.ts
onClose() {

  // fires after each click on close button:
  console.log('close button was clicked');
}

Вот некоторый код из близкой функциональности компонента оповещения:

// alert.component.ts
/**
  * Emits when chip is removed
  * @type EventEmitter<any>
  */
  // this is an instance of NbAlertComponent
  this.close = new EventEmitter();

/**
 * Emits the removed chip event
 */
NbAlertComponent.prototype.onClose = function () {
    this.close.emit();
};

Answer 1

В этом случае вы сможете использовать *ngIf Директива предоставлена ​​самим Angular, вот так.

// page.component.html
<nb-alert status="success" closable (close)="onClose()" *ngIf="alertIsOpen">
  You have been successfully authenticated!
</nb-alert>

alertIsOpen = true;

// page.component.ts
onClose() {
  // fires after each click on close button:
  console.log('close button was clicked');
  this.alertIsOpen = false;
}

---

Другой подход, который также будет работать для нескольких предупреждений, состоит в том, чтобы ваши предупреждения существовали в массиве.

// page.component.html
<ng-container *ngFor="alert of alerts">
 <nb-alert status="{{alert.status}}" closable (close)="onClose(alert)">
   {{alert.text}}
 </nb-alert>
</ng-container>

alerts = [
 {
   status: "success",
   text: "You have been successfully authenticated!"
 },
 {
   status: "danger",
   text: "Failed to authenticate!"
 }
]

// page.component.ts
onClose(alert) {
  // fires after each click on close button:
  console.log('close button was clicked');
  this.alerts.splice(this.alerts.indexOf(alert), 1);
}

---

Преимущество этих подходов заключается в том, что вы не сохраняете оповещение, существующее внутри вашей DOM