类型“字符串”不可分配给类型“MatSnackBar 水平位置”角度材料

Posted 2023-02-23

【中文标题】类型“字符串”不可分配给类型“MatSnackBar 水平位置”角度材料

【英文标题】：Type 'string' is not assignable to type 'MatSnackBarHorizontalPosition' angualr material

【发布时间】：2021-10-27 22:42:45

【问题描述】：

我创建了一个使用材料小吃栏显示消息的功能

showMessage(message: string, position =  horizontal: "right", vertical: "bottom" ): void 
    const _htmlMessage ="some message";
    this.snackBar.openFromComponent(SnackbarComponent, 
        data: 
            html: _htmlMessage
        ,
        duration: 2000,
        horizontalPosition: position.horizontal,
        verticalPosition: position.vertical
    );

但这表明

Type 'string' is not assignable to type 'MatSnackBarHorizontalPosition'.ts(2322)
snack-bar-config.d.ts(42, 5): The expected type comes from property 'horizontalPosition' which is declared here on type 'MatSnackBarConfig<any>'

但是如果我像这样直接赋值

duration: 2000,
horizontalPosition: "right",
verticalPosition: "bottom"

这行得通。我该如何解决这个问题？

【问题讨论】：

你能添加你的 SnackbarComponent 的内容吗？

【参考方案1】：

解决方案 1：定义 position 的类型。

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

showMessage(
    message: string,
    position: 
      horizontal: MatSnackBarHorizontalPosition;
      vertical: MatSnackBarVerticalPosition;
     =  horizontal: 'right', vertical: 'bottom' 
  ): void 
    const _htmlMessage = 'some message';
    this._snackBar.openFromComponent(SnackbarComponent, 
      data: 
        html: _htmlMessage
      ,
      duration: 2000,
      horizontalPosition: position.horizontal,
      verticalPosition: position.vertical
    );

Sample Solution 1 on StackBlitz

---

解决方案 2：将 horizontal 和 vertical 转换为各自的类型。

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

showMessage(
    message: string,
    position =  horizontal: 'right', vertical: 'bottom' 
  ): void 
    const _htmlMessage = 'some message';
    this._snackBar.openFromComponent(SnackBarOverviewExample, 
      data: 
        html: _htmlMessage
      ,
      duration: 2000,
      horizontalPosition: position.horizontal as MatSnackBarHorizontalPosition,
      verticalPosition: position.vertical as MatSnackBarVerticalPosition
    );
  

Sample Solution 2 on StackBlitz

---

参考文献

MatSnackBarHorizontalPosition & MatSnackBarVerticalPosition (Type aliases)