如何在 Angular 5 的 Angular 材质 Snackbar 中添加图标

Posted 2023-03-13

【中文标题】如何在 Angular 5 的 Angular 材质 Snackbar 中添加图标

【英文标题】：How to add Icon inside the Angular material Snackbar in Angular 5

【发布时间】：2019-02-05 13:22:14

【问题描述】：

我是 Angular 新手，我正在为 UI 使用 Angular Material Design。

在我的应用程序中，我有一个小吃店。

现在我想在零食栏中设置一个图标，但我尝试了一些 *** 帖子，但无法设置。

代码：

this.snackBar.open('You are already registered.Please log in.','',  duration: 2000 );

我想将图标设置为如图所示，但下面的小吃栏没有图标。我不知道如何添加。

谁能帮我添加这个。

【问题讨论】：

这可以用 unicode 完成吗？

【参考方案1】：

尝试MatSnackBar 服务的openFromComponent 或openFromTemplate 方法，而不是普通的open。

【参考方案2】：

MatSnackBar 的 open 方法只允许您打开带有文本的小吃店，即简单的小吃店。如果您想拥有一个更复杂的小吃店 - 例如添加了图标的小吃店 - 您必须创建一个独特的组件并使用 openFromComponent 方法打开该组件。

【参考方案3】：

我就是这样做的

创建组件 为snackBar 创建一个服务 将组件添加到模块中。在 declarations 和 entryComponents 中导入它 使用服务

例子

my-snackbar.component.ts

 import  Component, OnInit, Inject  from '@angular/core';
 import  MAT_SNACK_BAR_DATA  from '@angular/material/snack-bar';

    @Component(
      selector: 'my-snackbar',
      templateUrl: './snackbar.component.html',
      styleUrls: ['./snackbar.component.scss']
    )
    export class MySnackbarComponent implements OnInit 
      constructor(@Inject(MAT_SNACK_BAR_DATA) public data: any) 
        console.log(data); 
      

      ngOnInit() 

      get getIcon() 
        switch (this.data.snackType) 
          case 'Success':
            return 'done';
          case 'Error':
            return 'error';
          case 'Warn':
            return 'warning';
          case 'Info':
            return 'info';
        
      
    

…………

my-snackbar.component.html

<div fxLayout="row" class="snack-container">
  <div>
    <mat-icon>getIcon</mat-icon>
  </div>
  <div>
    <span>data.message</span>
  </div>
</div>

…………

my-snack-bar.service.ts

import  Injectable  from '@angular/core';
import  MatSnackBar  from '@angular/material/snack-bar';
import  MySnackbarComponent  from '../components/snackbar/my-snackbar.component';

@Injectable(
  providedIn: 'root'
)
export class MySnackBarService 
  constructor(private snackBar: MatSnackBar) 
  public openSnackBar(message: string, action: string, snackType?: snackType) 
    const _snackType: snackType =
      snackType !== undefined ? snackType : 'Success';

    this.snackBar.openFromComponent(SnackbarComponent, 
      duration: 2000,
      horizontalPosition: 'end',
      verticalPosition: 'top',
      data:  message: message, snackType: _snackType 
    );
  

........

app.module.ts

@NgModule(
  declarations: [
    SnackbarComponent
  ],
  imports: [
...
  ],
  providers: [],
  bootstrap: [AppComponent],
  entryComponents: [
    SnackbarComponent
  ]
)
export class AppModule 

.......

other.component.ts

import  Component, OnInit  from '@angular/core';
import  MySnackBarService  from '../../services/my-snack-bar.service';

@Component(
...
)
export class SomeComponent implements OnInit 

  constructor(
    private snack: MySnackService
  ) 

  ngOnInit() 
  


  openSnack() 
    this.snack.openSnackBar('Testing snack', '', 'Success');
  

【讨论】：

这很棒。最终将其用于我一直在开发的应用程序。还喜欢所有选项如何嵌套在服务中。感谢您发布此内容。

【参考方案4】：

Sivuyile TG Magutywa 中的一些额外代码使其完整：

在 Snackbar HTML 中：

<div class="snack-container box-getIcon.type">
  <div class="snack-container-message">
    <div>
      <i class="fas getIcon.icon"></i>
    </div>
    <div>
      <span>data.message</span>
    </div>
  </div>
  <div class="snack-container-icon">
    <i class="fas close" (click)="closeSnackbar()"></i>
  </div>
</div>

在 SnackBar TS 文件中：

export class SnackbarComponent implements OnInit 

  constructor(@Inject(MAT_SNACK_BAR_DATA) public data: any) 
    console.log(data);
  

  ngOnInit() 

  get getIcon() 
    switch (this.data.snackType) 
      case 'success':
        return type: this.data.snackType, icon: 'check';
      case 'error':
        return type: this.data.snackType, icon: 'faults';
      case 'warn':
        return type: this.data.snackType, icon: 'warning_outline';
      case 'info':
        return type: this.data.snackType, icon: 'info';
    
  

  closeSnackbar() 
    this.data.snackBar.dismiss();
  

在小吃店服务中：

export class SnackBarService 
  messageText: string [];
  constructor(
    public snackBar: MatSnackBar,
  ) 
  
public openSnackBar(message, type, duration?, verticalPosition?, horizontalPosition?) 
    const _snackType = type !== undefined ? type : 'success';
    this.snackBar.openFromComponent(SnackbarComponent, 
      duration: duration || 4000,
      horizontalPosition: horizontalPosition || 'end',
      verticalPosition: verticalPosition || 'top',
      data:  message: message, snackType: _snackType, snackBar: this.snackBar 
    );
  

在其他组件中的用法：

constructor(private snackBar: SnackBarService) 
testSanck() 
   this.snackBar.openSnackBar('User Not Found', 'error');

【参考方案5】：

对于仍在寻找此答案的其他任何人，有一种更简单的方法可以做到这一点，而无需创建新组件或更改您的小吃店名称。

您可以像这样向材料小吃栏添加一个类：

this.snackBar.open(message, "Dismiss", 
    panelClass:'error-alert-snackbar'
);

然后在你的 CSS 中，添加你的类。你可以像这样添加一些颜色：

.error-alert-snackbar
    color: white!important;
    background-color:red !important;
   .mat-simple-snackbar-action 
       color:white !important;
   

接下来您可以使用“yourclass:after”为该类添加图标：

.error-alert-snackbar:after      
    font-family: "FontAwesome";
    content: "\f071";

上面的“内容”是您通常调用的字体真棒图标名称的 Unicode 版本。您总是可以在图标图片下方的图标的 Font Awesome 页面上找到它，如果显示如何调用它。在这种情况下，它的 fa-exclamation-triangle。你通常会这样称呼它

<i class="fa fa-exclamation-triangle" ></i>

但是由于您无权访问材料小吃栏 html，您可以将图标直接添加到您的 css 类中，如我所示，然后将该 css 类附加到打开时的小吃栏，如图所示

编辑：我不知道这是否是 Angular 5 之后创建的小吃店的新功能，或者它是否在提出这个问题时存在。