Question

我希望使用[dismissOnTimeout]属性多次显示ngx-bootstrap警报;然而，在它第一次被解雇之后，我无法弄清楚如何再次展示它。

我的Angular html模板：

＆＃13;

  <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>

＆＃13;

以我的组合方式：

＆＃13;

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

＆＃13;

因此，当我致电openModal()后，alert<>会打开，并在第一时间被解雇。我试图弄清楚如何重置警报，这样我就可以再次显示该警报 - 即模拟烤面包机类型的组件。

谢谢。

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) {}

通过这种方式，您可以在所需的任何时间/地点关闭警报，并且可以免除超时时间。

显示/隐藏ngx-boostrap警报

2 个答案: