2

我想在 Angular 网站上显示多个 Snackbar。我正在使用 ignite UI 进行 Angular 并使用来自 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>

我可以使用

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

 this.igxSnackBar.show();

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

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

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

谁能帮我解决这个问题？

4

1 回答 1

2

为什么不为每个Snackbar 组件使用特定的@ViewChild选择器。您可以使用模板引用变量：

<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()。

于 2021-08-13T13:53:07.417 回答