如何在 Angular 5 中的 Angular 材质 Snackbar 中添加图标 [英] How to add Icon inside the Angular material Snackbar in Angular 5

问题描述

我是 angular 的新手，我正在使用 Angular Material Design for UI.

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

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

代码:

this.snackBar.open('您已经注册，请登录','', { duration: 2000 });

我想设置图片中的图标，但我有下面没有图标的小吃店.我不知道如何添加.

谁能帮我添加这个.

解决方案

我是这样做的

1. 创建组件
2. 为小吃店创建服务
3. 将组件添加到模块中.在声明和entryComponents
中导入
4. 使用服务

示例

my-snackbar.component.ts

 import { Component, OnInit, Inject } from '@angular/core';从'@angular/material/snack-bar'导入{MAT_SNACK_BAR_DATA}；@成分({选择器:'我的小吃店'，templateUrl: './snackbar.component.html',styleUrls: ['./snackbar.component.scss']})导出类 MySnackbarComponent 实现 OnInit {构造函数(@Inject(MAT_SNACK_BAR_DATA)公共数据:任何){控制台日志(数据)；}ngOnInit() {}得到 getIcon() {开关(this.data.snackType){案例成功":返回完成"；案例错误":返回错误"；案例警告":返回警告"；案例信息":返回信息"；}}}

........

my-snackbar.component.html

<div><mat-icon>{{getIcon}}</mat-icon>
<div><span>{{data.message}}</span>

........

my-snack-bar.service.ts

import { Injectable } from '@angular/core';从 '@angular/material/snack-bar' 导入 { MatSnackBar };import { MySnackbarComponent } from '../components/snackbar/my-snackbar.component';@Injectable({提供在:'根'})导出类 MySnackBarService {构造函数(私人小吃店:MatSnackBar){}public openSnackBar(消息:字符串，动作:字符串，snackType?:snackType){const_snackType:snackType =零食类型 !== 未定义?零食类型:'成功';this.snackBar.openFromComponent(SnackbarComponent, {持续时间:2000，水平位置:'结束'，垂直位置:'顶部'，数据:{消息:消息，snackType:_snackType}});}}

........

app.module.ts

@NgModule({声明: [小吃店组件],进口:[...],提供者:[]，引导程序:[AppComponent]，入口组件:[小吃店组件]})导出类 AppModule {}

.......

other.component.ts

import { Component, OnInit } from '@angular/core';从 '../../services/my-snack-bar.service' 导入 { MySnackBarService };@成分({...})导出类 SomeComponent 实现 OnInit {构造函数(私人小吃:MySnackService) {}ngOnInit() {}打开零食(){this.snack.openSnackBar('测试零食', '', '成功');}}

I am new to angular and I am using Angular Material Design for UI.

In my application I have a snackbar .

Now I want to set an Icon inside the snackbar but I tried some Stackoverflow post I can't set it .

code:

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

I want to set the icon as in the image but I have the below snackbar without icon .I don't know how to add this .

can anyone help me to add this.

解决方案

This how I did it

1. Create a component
2. Create a Service for the snackBar
3. add the component to a module. import it in declarations and entryComponents
4. Use the service

example

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');
  }
}

这篇关于如何在 Angular 5 中的 Angular 材质 Snackbar 中添加图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！