我無法設置 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 值必須是相同的類型。