Show/Hide ngx-bootstrap 警报

Question

我想使用 [dismissOnTimeout] 属性多次显示 ngx-bootstrap 警报；但是，在第一次关闭后，我不知道如何再次显示它。

我的Angularhtml模板：

  <button type="button" class="btn btn-primary" (click)="openModal(template)">Create template modal</button>

<div *ngIf="showMessage">
    <alert type="success" [dismissOnTimeout]="dismissValue">
        <strong>Well done!</strong> You successfully upload (disappearing in 3,2,1..).
    </alert>
  </div>

在我的组件方法中：

openModal(template: TemplateRef<any>) {
    this.showMessage = true;
    this.modalRef = this.modalService.show(template);
  }

所以一旦我调用 openModal()，alert<> 就会打开并在第一时间被关闭。我正在尝试弄清楚如何重置警报，以便我可以再次显示该警报 - i.e.simulating 一种烤面包机类型的组件。

谢谢。

Answer 1

没有直接的方法来显示超时后隐藏的警报，但您可以使用一些解决方法（ngIf 和警报的 onClosed 输出）。

<alert *ngIf="isOpen" type="success" dismissOnTimeout="5000" (onClosed)="isOpen = false">
  5 sec timeout
</alert>

<button type="button" class="btn btn-primary" (click)="isOpen = true">Show again</button>

https://stackblitz.com/edit/angular-pfxjgi?file=app%2Fdismiss-on-timeout.html

Answer 2

另一种方法是使用文档并找到您要关闭的警报并添加一个 ID：

<alert id="alertid" *ngIf="isOpen" type="success" (onClosed)="isOpen = false">
  5 sec timeout
</alert>

然后在您希望以编程方式关闭控件的部分。

const element = this._document.getElementById('alertid').getElementsByTagName('button');

if (element && element.length) {
   element[0].click();
}

其中文档定义为：

  constructor(@Inject(DOCUMENT) private _document: Document) {}

通过这种方式，您可以在任何 time/place 关闭警报，并且可以免除超时。

Show/Hide ngx-bootstrap 警报

Show/Hide ngx-boostrap alert

ngx-bootstrap