Angular 2 - 模板

在關於元件的章節中，我們已經看到了以下模板的示例。

template: '
   <div>
      <h1>{{appTitle}}</h1>
      <div>To Tutorials Point</div>
   </div>
'

這被稱為內聯模板。還有其他方法可以定義模板，可以透過 templateURL 命令完成。在元件中使用它的最簡單方法如下。

語法

templateURL:
viewname.component.html

引數

• viewname - 這是應用程式元件模組的名稱。

在 viewname 後，需要將元件新增到檔名中。

以下是定義內聯模板的步驟。

步驟 1 - 建立一個名為 app.component.html 的檔案。這將包含檢視的 html 程式碼。

步驟 2 - 在上面建立的檔案中新增以下程式碼。

<div>{{appTitle}} Tutorialspoint </div>

這定義了一個簡單的 div 標籤，並引用了 app.component 類中的 appTitle 屬性。

步驟 3 - 在 app.component.ts 檔案中，新增以下程式碼。

import { Component } from '@angular/core';

@Component ({
   selector: 'my-app',
   templateUrl: 'app/app.component.html'  
})

export class AppComponent {
   appTitle: string = 'Welcome';
}

從上面的程式碼中，唯一可以注意到的變化是來自 templateURL，它提供了指向位於 app 資料夾中的 app.component.html 檔案的連結。

步驟 4 - 在瀏覽器中執行程式碼，您將獲得以下輸出。

從輸出中可以看出，模板檔案 (app.component.html) 檔案正在被相應地呼叫。