更新元件類別

在 Angular 中，元件的邏輯與行為定義在元件的 TypeScript 類別中。

NOTE: 在核心概念指南中進一步了解如何顯示動態文字。

在這個練習中，你將學習如何更新元件類別，以及如何使用插值。

  1. 加上名為 city 的屬性

    更新元件類別，為 App 類別加上一個名為 city 的屬性。

    export class App {
  city = 'San Francisco';
}

    city 屬性的型別是 string，但由於 TypeScript 的型別推論，你可以省略型別。city 屬性可以在 App 類別中使用，也可以在元件範本中參照。


    要在範本中使用類別屬性，你必須使用 {{ }} 語法。

  2. 更新元件範本

    更新 template 屬性，讓它與以下 HTML 相符：

    template: `Hello {{ city }}`,

    這是插值的一個範例，也是 Angular 範本語法的一部分。它不只讓你把動態文字放進範本中，你還可以使用這個語法來呼叫函式、撰寫運算式等等。

  3. 多練習一下插值

    試試看——再加上一組 {{ }}，內容是 1 + 1：

    template: `Hello {{ city }}, {{ 1 + 1 }}`,

    Angular 會計算 {{ }} 中的內容，並把輸出結果渲染到範本中。

這只是 Angular 範本可能性的開端，繼續學習，你會發現更多。