我无法设置 html Angular 元素的属性

Question

我正在研究 Angular 的培训项目，像 2020 年这样的项目，但没有任何效果。 我有版本 11，教程使用 9。教程定义了一个变量，它改变了 html 元素的属性，在创建它时，我设置了初始值：

menuMode = 'push';

在这里我将它传递给 html

<ng-sidebar
    [mode]="menuMode"
>

编译器抛出错误：

error TS2322: Type 'string' is not assignable to type '"over" | "push" | "slide"'

如果你声明一个这样的变量：

menuMode: 'over' | 'push' | 'slide';

然后编译器跳过，但这在某种程度上是不正确的，如果明天出现另一个属性

Answer 1

我注意到您的示例代码中存在一些差异。 在组件 class 中，此行将创建一个名为menuMode的变量，其值为 push。 没有明确定义类型，但会推断出字符串：

menuMode = 'push';

此行将创建一个名为menuMode的变量，其类型为'over' | 'push' | 'slide' 'over' | 'push' | 'slide' 'over' | 'push' | 'slide' ，但没有赋值。 我相信默认的 state 将是未定义的：

menuMode: 'over' | 'push' | 'slide';

我怀疑如果你将两者结合起来，你会得到你所追求的。

menuMode: 'over' | 'push' | 'slide' = 'push';

我不确定您是否是创建ng-sidebar的人，因为它不是我认识的组件。 我个人尽量避免这样的联合类型。 由于您有一个受控词汇表，我将其定义为枚举：

export enum MENU_MODES {
  OVER: 'over',
  PUSH: 'push',
  SLIDE: 'slide'
}

您将设置菜单模式值，如下所示：

menuMode: MENU_MODES  = MENU_MODES.PUSH;

并且ng-sidebar内部的 mode 值必须是相同的类型。