Angular 8 - Angular元件和模板

上一頁
下一頁

正如我們之前學到的，元件是 Angular 應用程式的構建塊。Angular 元件的主要工作是生成網頁的一部分，稱為檢視。每個元件都將有一個關聯的模板，它將用於生成檢視。

讓我們在本節學習元件和模板的基本概念。

新增元件

讓我們在我們的ExpenseManager應用程式中建立一個新元件。

開啟命令提示符並進入ExpenseManager應用程式。

cd /go/to/expense-manager

使用以下指定的ng generate component命令建立一個新元件：

ng generate component expense-entry

輸出

輸出如下所示：

CREATE src/app/expense-entry/expense-entry.component.html (28 bytes) 
CREATE src/app/expense-entry/expense-entry.component.spec.ts (671 bytes) 
CREATE src/app/expense-entry/expense-entry.component.ts (296 bytes) 
CREATE src/app/expense-entry/expense-entry.component.css (0 bytes) 
UPDATE src/app/app.module.ts (431 bytes)

這裡：

  • ExpenseEntryComponent 建立在 src/app/expense-entry 資料夾下。
  • 建立了元件類、模板和樣式表。
  • AppModule 使用新元件進行了更新。

向ExpenseEntryComponent (src/app/expense-entry/expense-entry.component.ts) 元件新增 title 屬性。

import { Component, OnInit } from '@angular/core'; @Component({ 
   selector: 'app-expense-entry', 
   templateUrl: './expense-entry.component.html', styleUrls: ['./expense-entry.component.css'] 
}) 
export class ExpenseEntryComponent implements OnInit {
   title: string;
   constructor() { } 
   ngOnInit() { 
      this.title = "Expense Entry" 
   } 
}

使用以下內容更新模板src/app/expense-entry/expense-entry.component.html。

<p>{{ title }}</p>

開啟src/app/app.component.html 幷包含新建立的元件。

<h1>{{ title }}</h1>
<app-expense-entry></app-expense-entry>

這裡：

app-expense-entry 是選擇器值，可以用作常規 HTML 標籤。

最後，應用程式的輸出如下所示：

HTML Tag

在學習更多關於模板的課程中，我們將更新元件的內容。

模板

Angular 元件的組成部分是模板。它用於生成 HTML 內容。模板是具有附加功能的純 HTML。

附加模板

模板可以使用@component 裝飾器的元資料附加到 Angular 元件。Angular 提供兩種元資料將模板附加到元件。

templateUrl

我們已經知道如何使用 templateUrl。它期望模板檔案的相對路徑。例如，AppComponent 將其模板設定為 app.component.html。

templateUrl: './app.component.html',

template

template 允許將 HTML 字串放在元件本身內部。如果模板內容最少，那麼為了方便跟蹤和維護，將其放在元件類本身會更容易。

@Component({ 
   selector: 'app-root', 
   templateUrl: `<h1>{{ title }}</h1>`, 
   styleUrls: ['./app.component.css'] 
}) 
export class AppComponent implements OnInit { 
   title = 'Expense Manager'; 
   constructor(private debugService : DebugService) {} ngOnInit() { 
      this.debugService.info("Angular Application starts"); 
   } 
}

附加樣式表

Angular 模板可以使用與 HTML 類似的 CSS 樣式。模板從兩個來源獲取其樣式資訊：a) 來自其元件 b) 來自應用程式配置。

元件配置

元件裝飾器提供兩個選項，styles 和styleUrls，用於向其模板提供 CSS 樣式資訊。

  • Styles − styles 選項用於將 CSS 放在元件本身內部。
styles: ['h1 { color: '#ff0000'; }']
  • styleUrls − styleUrls 用於引用外部 CSS 樣式表。我們也可以使用多個樣式表。
styleUrls: ['./app.component.css', './custom_style.css']

應用程式配置

Angular 在專案配置(angular.json) 中提供了一個選項來指定 CSS 樣式表。在angular.json 中指定的樣式將適用於所有模板。讓我們檢查我們的angular.json，如下所示：

{
"projects": { 
   "expense-manager": { 
      "architect": { 
         "build": { 
            "builder": "@angular-devkit/build-angular:browser", "options": { 
               "outputPath": "dist/expense-manager", 
               "index": "src/index.html", 
               "main": "src/main.ts", 
               "polyfills": "src/polyfills.ts", 
               "tsConfig": "tsconfig.app.json", 
               "aot": false, 
               "assets": [ 
                  "src/favicon.ico", 
                  "src/assets" 
               ], 
               "styles": [ 
                  "src/styles.css" 
               ], 
               "scripts": [] 
            }, 
         }, 
      } 
   }}, 
   "defaultProject": "expense-manager" 
}

這裡：

styles 選項將src/styles.css 設定為全域性 CSS 樣式表。我們可以包含任意數量的 CSS 樣式表，因為它支援多個值。

包含 Bootstrap

讓我們使用styles 選項將 Bootstrap 包含到我們的ExpenseManager 應用程式中，並將預設模板更改為使用 Bootstrap 元件。

開啟命令提示符並進入 ExpenseManager 應用程式。

cd /go/to/expense-manager

使用以下命令安裝bootstrap 和JQuery 庫

npm install --save bootstrap@4.5.0 jquery@3.5.1

這裡：

我們安裝了 JQuery，因為 Bootstrap 廣泛使用 jquery 來實現高階元件。

選擇angular.json 並設定 bootstrap 和 jquery 庫路徑。

{ 
   "projects": { 
      "expense-manager": { 
         "architect": { 
            "build": {
               "builder":"@angular-devkit/build-angular:browser", "options": { 
                  "outputPath": "dist/expense-manager", 
                  "index": "src/index.html", 
                  "main": "src/main.ts", 
                  "polyfills": "src/polyfills.ts", 
                  "tsConfig": "tsconfig.app.json", 
                  "aot": false, 
                  "assets": [ 
                     "src/favicon.ico", 
                     "src/assets" 
                  ], 
                  "styles": [ 
                     "./node_modules/bootstrap/dist/css/bootstrap.css", "src/styles.css" 
                  ], 
                  "scripts": [ 
                     "./node_modules/jquery/dist/jquery.js", "./node_modules/bootstrap/dist/js/bootstrap.js" 
                  ] 
               }, 
            }, 
         } 
   }}, 
   "defaultProject": "expense-manager" 
}

這裡：

scripts 選項用於包含 JavaScript 庫。透過scripts 註冊的JavaScript 將可用於應用程式中的所有 Angular 元件。

開啟app.component.html 並更改內容，如下所示

<!-- Navigation --> 
<nav class="navbar navbar-expand-lg navbar-dark bg-dark static-top"> 
   <div class="container"> 
      <a class="navbar-brand" href="#">{{ title }}</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"> 
         <span class="navbar-toggler-icon">
         </span> 
      </button> 
      <div class="collapse navbar-collapse" id="navbarResponsive"> 
         <ul class="navbar-nav ml-auto"> 
            <li class="nav-item active"> 
            <a class="nav-link" href="#">Home
               <span class="sr-only">(current)
               </span>
            </a> 
            </li> 
            <li class="nav-item"> 
            <a class="nav-link" href="#">Report</a> 
            </li> 
            <li class="nav-item"> 
            <a class="nav-link" href="#">Add Expense</a> 
            </li> 
            <li class="nav-item"> 
            <a class="nav-link" href="#">About</a> 
            </li> 
         </ul> 
      </div> 
   </div> 
</nav> 
<app-expense-entry></app-expense-entry>

這裡：

使用了 Bootstrap 導航和容器。

開啟src/app/expense-entry/expense-entry.component.html 並放置以下內容。

<!-- Page Content --> 
<div class="container"> 
   <div class="row"> 
      <div class="col-lg-12 text-center" style="padding-top: 20px;"> 
         <div class="container" style="padding-left: 0px; padding-right: 0px;"> 
            <div class="row"> 
            <div class="col-sm" style="text-align: left;"> {{ title }} 
            </div> 
            <div class="col-sm" style="text-align: right;"> 
               <button type="button" class="btn btn-primary">Edit</button> 
            </div> 
            </div> 
         </div> 
         <div class="container box" style="margin-top: 10px;"> 
         <div class="row"> 
         <div class="col-2" style="text-align: right;">  
            <strong><em>Item:</em></strong> 
         </div> 
         <div class="col" style="text-align: left;"> 
            Pizza 
         </div>
         </div> 
         <div class="row"> 
         <div class="col-2" style="text-align: right;">
            <strong><em>Amount:</em></strong> 
         </div> 
         <div class="col" style="text-align: left;"> 
            20 
         </div> 
         </div> 
         <div class="row"> 
         <div class="col-2" style="text-align: right;"> 
            <strong><em>Category:</em></strong> 
         </div> 
         <div class="col" style="text-align: left;"> 
            Food 
         </div> 
         </div> 
         <div class="row"> 
         <div class="col-2" style="text-align: right;"> 
            <strong><em>Location:</em></strong>
         </div> 
         <div class="col" style="text-align: left;"> 
            Zomato 
         </div> 
         </div> 
         <div class="row"> 
         <div class="col-2" style="text-align: right;"> 
            <strong><em>Spend On:</em></strong> 
         </div> 
         <div class="col" style="text-align: left;"> 
            June 20, 2020 
         </div> 
         </div> 
      </div> 
   </div> 
</div> 
</div>

重啟應用程式。

應用程式的輸出如下：

Restart Tag

我們將在下一章改進應用程式以處理動態支出條目。

列印頁面
上一頁
下一頁
廣告