我是 Angular 新手，我正在为 UI 使用 Angular Material Design。
在我的应用程序中，我有一个小吃店。
现在我想在零食栏中设置一个图标，但我尝试了一些 Stackoverflow 帖子，但无法设置。
代码：
this.snackBar.open('You are already registered.Please log in.','', { duration: 2000 });
我想将图标设置为如图所示，但下面的小吃栏没有图标。我不知道如何添加。
谁能帮我添加这个。
【问题讨论】：
标签： angular typescript angular-material
尝试MatSnackBar 服务的openFromComponent 或openFromTemplate 方法，而不是普通的open。
【讨论】：
MatSnackBar 的 open 方法只允许您打开带有文本的小吃店，即简单的小吃店。如果您想拥有一个更复杂的小吃店 - 例如添加了图标的小吃店 - 您必须创建一个独特的组件并使用 openFromComponent 方法打开该组件。
【讨论】：
我就是这样做的
例子
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');
}
}
【讨论】：
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');
}
【讨论】：
对于仍在寻找此答案的其他任何人，有一种更简单的方法可以做到这一点，而无需创建新组件或更改您的小吃店名称。
您可以像这样向材料小吃栏添加一个类：
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 之后创建的小吃店的新功能，或者它是否在提出这个问题时存在。
【讨论】：