时间戳

首页 > 解决方案 > 有没有办法可以将 Snackbar 定位在@ngmodule 中？

angular - 有没有办法可以将 Snackbar 定位在@ngmodule 中？

问题描述

我在多个组件中使用snackbar，所以我决定在主模块中设置持续时间，我想将位置添加为顶部

这是我的app.module.ts


import { MatSnackBar, MatSnackBarVerticalPosition, MAT_SNACK_BAR_DEFAULT_OPTIONS } from '@angular/material/snack-bar';
.
.

@NgModule({
  declarations: [],
  imports: [],
  providers: [
    {provide: MAT_SNACK_BAR_DEFAULT_OPTIONS, useValue: {duration: 1500}}
  ],
  bootstrap: [AppComponent]
})
export class AppModule {

 }

编辑：snackbar 方法在另一个组件中是相同的。当我将它添加到组件方法时，它显示一个错误：

Argument of type '{ verticalPosition: any; }' 不可分配给“字符串”类型的参数。

当我添加持续时间时也发生了同样的情况。

商品组件

import { MatSnackBar, MatSnackBarHorizontalPosition, MatSnackBarVerticalPosition } from '@angular/material/snack-bar';


@Component({})
export class CommodityListComponent implements OnInit {

 displayedColumns: string[] = [''];
 
 verticalPosition: MatSnackBarVerticalPosition = 'top';

 constructor(public svc: CommodityServiceService, private dialog: MatDialog,private _snackBar: MatSnackBar) { }
   getList() {
     this.svc.getCommodities();
   }

 ngOnInit() {
   this.getList();
 }
 Edit(e:any) {
  this.svc.Edit(e);
  const conf = new MatDialogConfig();
  conf.width = "30%";
  this.dialog.open(CommodityComponent, conf);
}
 openDialog() {
  this.svc.form.reset();
  const conf = new MatDialogConfig();
  conf.width = "30%";
  this.dialog.open(CommodityComponent, conf)
}
DeleteCommodity(e: any){
  debugger
  this.svc.DeleteRecord(e).subscribe(e => {
    this.openSnackBar("Record Deleted");
    this.svc.getCommodities();
  });
}
openSnackBar(message: string) {
  this._snackBar.open(message);
  
}
}

我正在使用角度 12.0.1

标签： angularangular-materialangular12

解决方案

在我的情况下，我没有在我的 openSnackbar 方法中添加操作字符串，它看起来像这样：

openSnackBar(message: string) {
  this._snackBar.open(message,{
    verticalPosition:this.verticalPosition
  }
 );  
}

我认为这就是为什么它向我显示错误的原因。所以，我添加了action: string参数并作为参数传递""，我的方法看起来像这样：

openSnackBar(message: string,Action:string) {
  this._snackBar.open(message,Action,{
    verticalPosition:this.verticalPosition
  }
  );
}

它有效！

推荐阅读