如何在Angular 5的Angular材质Snackbar中添加Icon [英] How to add Icon inside the Angular material Snackbar in Angular 5
问题描述
我是angular的新手,正在使用UI的Angular Material Design.
I am new to angular and I am using Angular Material Design for UI.
在我的应用程序中,我有一个小吃店.
In my application I have a snackbar .
现在,我想在小吃栏中设置一个图标,但是我尝试了一些我无法设置的Stackoverflow帖子.
Now I want to set an Icon inside the snackbar but I tried some Stackoverflow post I can't set it .
代码:
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 .
有人可以帮我添加吗?
推荐答案
这是我的方法
- 创建组件
- 为点心栏创建服务
- 将组件添加到模块中.将其导入声明和 entryComponents
- 使用服务
- Create a component
- Create a Service for the snackBar
- add the component to a module. import it in declarations and entryComponents
- Use the service
示例
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
app.module.ts
@NgModule({
declarations: [
SnackbarComponent
],
imports: [
...
],
providers: [],
bootstrap: [AppComponent],
entryComponents: [
SnackbarComponent
]
})
export class AppModule {}
.......
other.component.ts
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中添加Icon的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!