我有一个工作的零食吧,但它只在每个组件上,我想在我的服务上添加它,所以我会打电话给它。这是我在component.ts
上的样本
import { MdSnackBar, MdSnackBarRef } from '@angular/material';
...
export class EmployeeListComponent implements OnInit {
public toastRef: MdSnackBarRef<any>;
constructor(private _activatedRoute:ActivatedRoute,private router: Router, private http:PMISHttpService, private toast: MdSnackBar) {
ngOnInit() {
this.notify('test');
}
...
notify (text: string) {
this.toastRef = this.toast.open(text, null);
setTimeout(() => {
this.toastRef.dismiss();
}, 5000);
}
...
}
如果您希望SnackBar在整个应用程序中运行,您应该将其放入app.component并与服务进行通信。
notification.service.ts:
public notification$: Subject<string> = new Subject();
app.component.ts:
constructor(
private notificationService: NotificationService, private snackBar: MatSnackBar
) {
this.notificationService.notification$.subscribe(message => {
this.snackBar.open(message);
});
}
any.component.ts:
this.notificationService.notification$.next('this is a notification');
要在任何地方拥有它,为它创建一个服务。此外,你应该使用snackbar配置来设置持续时间并使snackbar公开:
import {Injectable, NgZone} from '@angular/core';
import {MatSnackBar} from '@angular/material';
@Injectable()
export class CustomSnackbarService {
constructor(
public snackBar: MatSnackBar,
private zone: NgZone
) {}
public open(message, action = 'success', duration = 50000) {
this.zone.run(() => {
this.snackBar.open(message, action, { duration });
});
}
}
它还需要在ngZone
:https://github.com/angular/material2/issues/9875中运行
然后在组件中:
customSnackbarService.open('hello')
你可以轻松地做到这一点。请在下面的示例中找到我在我的一个项目中使用的示例,它的工作原理非常好
import { Injectable } from '@angular/core';
import {
MatSnackBar,
MatSnackBarConfig,
MatSnackBarHorizontalPosition,
MatSnackBarVerticalPosition,
MatSnackBarRef
} from '@angular/material';
@Injectable()
export class SnackBarService {
snackBarConfig: MatSnackBarConfig;
snackBarRef: MatSnackBarRef<any>;
horizontalPosition: MatSnackBarHorizontalPosition = 'center';
verticalPosition: MatSnackBarVerticalPosition = 'top';
snackBarAutoHide = '1500';
constructor(private snackBar: MatSnackBar) { }
openSnackBar(message) {
this.snackBarConfig = new MatSnackBarConfig();
this.snackBarConfig.horizontalPosition = this.horizontalPosition;
this.snackBarConfig.verticalPosition = this.verticalPosition;
this.snackBarConfig.duration = parseInt(this.snackBarAutoHide, 0);
this.snackBarConfig.panelClass = 'glam-snackbar';
this.snackBarRef = this.snackBar.open(message, '', this.snackBarConfig);
}
}
现在,您只需要在组件中或在您想要使用它的地方注入此服务,并使用您要显示的消息调用openSnackBar()方法。
希望这可以帮助!!
我正在使用版本版本“:”2.0.0-beta.10“,这是我为了让它工作而做的
在ApModule中
import { NotificationService } from "./notification/notification.service";
import { MdSnackBarModule } from "@angular/material";
@NgModule({
imports: [
MdSnackBarModule,
FormsModule
],
providers: [WebService, NotificationService]
按照上一篇文章中的建议创建通知服务
import { Injectable } from "@angular/core";
import {
MdSnackBar,
MdSnackBarConfig,
// MdSnackBarHorizontalPosition,
// MdSnackBarVerticalPosition,
MdSnackBarRef
} from "@angular/material";
@Injectable()
export class NotificationService {
private snackBarConfig: MdSnackBarConfig;
private snackBarRef: MdSnackBarRef<any>;
private snackBarAutoHide = "5000"; //milliseconds for notification , 5 secs
constructor(private sb: MdSnackBar) {}
openSnackBar(message) {
this.snackBarConfig = new MdSnackBarConfig();
//this.snackBarConfig.horizontalPosition = this.horizontalPosition; only in current version Demo uses very old version . need to upgrade later
//this.snackBarConfig.verticalPosition = this.verticalPosition; only in current version Demo uses very old version . need to upgrade later
this.snackBarConfig.duration = parseInt(this.snackBarAutoHide, 0);
this.sb.open(message, "", this.snackBarConfig);
}
}
消费服务如下图所示
this.notify.openSnackBar(message);