如何让NbAlertComponent的关闭按钮实现关闭弹窗功能？

我之前也碰到过这个情况，Nebular的NbAlert组件确实不会自动处理隐藏逻辑，得我们自己手动控制显示状态，这里有两种简单可行的方案：

方法一：用*ngIf控制显示（推荐） #

这是最贴合Angular开发思维的方式，通过布尔变量直接控制alert的显示与隐藏：

1. 在组件类中添加控制显示的变量，并修改onClose方法：

// page.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-page',
  templateUrl: './page.component.html',
})
export class PageComponent {
  // 初始状态设为显示
  isAlertVisible = true;

  onClose() {
    console.log('close button was clicked');
    // 点击关闭时切换状态隐藏alert
    this.isAlertVisible = false;
  }
}

2. 在模板中给nb-alert加上*ngIf指令：

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

方法二：通过ViewChild操作组件实例 #

如果你需要更直接地操控组件（比如后续可能要重新显示弹窗），可以用ViewChild获取NbAlert的实例，手动修改它的显示状态：

1. 组件类中引入ViewChild并获取alert实例：

// page.component.ts
import { Component, ViewChild } from '@angular/core';
import { NbAlertComponent } from '@nebular/theme';

@Component({
  selector: 'app-page',
  templateUrl: './page.component.html',
})
export class PageComponent {
  @ViewChild(NbAlertComponent) alertComponent!: NbAlertComponent;

  onClose() {
    console.log('close button was clicked');
    // 通过修改组件DOM的样式来隐藏弹窗
    this.alertComponent.elementRef.nativeElement.style.display = 'none';
  }
}

模板保持原有写法即可：

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

补充说明 #

Nebular的closable属性仅负责渲染关闭按钮并触发close事件，本身没有内置隐藏组件的逻辑——这是为了让开发者灵活控制弹窗的显示时机（比如满足某些条件后重新显示），所以第一种*ngIf的方法是官方推荐的常规用法。

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