代码之家 › 专栏 › 技术社区 › Aw3same

Matsnakbar中的样式从组件打开

angular-material2 angular-material angular

0

Aw3same · 技术社区 · 7 年前

我正在寻找一种方法来执行以下操作:为了显示通知,我想实现一个自定义SnackBar。我跟着医生走了( here )我创建了一个简单的Snackbar,带有一些自定义配置。

this.snackBar.open('Message one', 'OK', configSuccess);

export const configSuccess: MatSnackBarConfig = {
  panelClass: 'style-success',
  duration: 10000,
  horizontalPosition: 'left',
  verticalPosition: 'bottom'
};

/*...*/    
this.snackBar.openFromComponent(SnackbarMessageComponent, {
              data: 'Message one',
            });
/*...*/

@Component({
  selector: 'app-snackbar-message',
  templateUrl: './snackbar-message.component.html',
  styleUrls: ['./snackbar-message.component.scss']
})
export class SnackbarMessageComponent implements OnInit {

  constructor(@Inject(MAT_SNACK_BAR_DATA) public data: any) { }

  ngOnInit() {
  }

好吧,但现在我有个问题。我想把我之前定义的配置传递给这个新的SnackBar( config Success 但在官方文档和谷歌上我什么也没找到。

有没有什么方法可以做到这一点而不必在全球范围内进行定义?有人能指引我或告诉我去哪里吗?提前谢谢!

1 回复 | 直到 7 年前

1

5

Aw3same 7 年前

最后,感谢 shivensinha4 在这个 issue ,我有钥匙:

它还可以为用户提供样式 openFromComponent 函数,如下所示:

this.snackBar.openFromComponent(SnackbarMessageComponent, {
  data: 'Message one',
  ...this.configSuccess
});

Stackblitz