Infragistics：如何使用 id 显示多个 ignite Snackbar

Question

我想在 angular 网站上显示多个 Snackbar。我正在为 angular 使用 ignite UI 并使用 ignite.

的 Snackbar

<igx-snackbar id="snackbar1" [displayTime]="displayTime">
  <div [class]="leftBorder"></div>
  <div class="snackbar-detail">
    <img [class]="iconType" [alt]="('LBL_CLOSE' | translate)" [src]="iconPath">
    <div class="message-section">
      <div class="snackbar-title">{{messageTitle}}</div>
      <div class="snackbar-message">{{messageDesc}}</div>
    </div>
    <img (click)="closeSnackbar()" class="close-icon" [alt]="('LBL_CLOSE' | translate)"
      src="assets/icons/essentials/close.svg">
  </div>
</igx-snackbar>

我可以使用

显示 snacbar

 @ViewChild(IgxSnackbarComponent, { static: true }) public igxSnackBar: IgxSnackbarComponent;

 this.igxSnackBar.show();

但我想展示另一个小吃店，所以我添加了 id="snackbar1" 并且能够使用

获取 ID

let snackbarId = this.igxSnackBar.id;
console.log(snackbarId);

但我无法使用 id 打开特定的小吃店。

谁能帮我解决这个问题？

Answer 1

为什么不使用特定的 @ViewChild selector for each of the Snackbar components。您可以使用模板引用变量：

<igx-snackbar #snackbar1 [autoHide]="false" actionText="CLOSE" (clicked)="close(snackbar1)">Message sent</igx-snackbar>

..

模板引用变量'snackbar1'

@ViewChild('snackbar1', { static: true }) public igxSnackBar: IgxSnackbarComponent;

使用您共享的当前实现，更改检测器将在 DOM 中查找第一个 Snackbar。

较新版本已弃用 show() 方法，请改用 open()。

Infragistics：如何使用 id 显示多个 ignite Snackbar

Infragistics: How to show multiple ignite Snackbar using id

angular

infragistics

snackbar

ignite-ui-angular