Angular 8 - Angular 组件和模板

更新于 2024/4/21 1:57:00

正如我们之前了解到的，组件是 Angular 应用程序的构建块。 Angular 组件的主要工作是生成一段名为 view 的网页。每个组件都会有一个关联的模板，它将用于生成视图。

本章让我们学习一下组件和模板的基本概念。

添加组件

让我们在 ExpenseManager 应用程序中创建一个新组件。

打开命令提示符并转到ExpenseManager应用程序。

cd /go/to/expense-manager

使用nggeneratecomponent命令创建一个新组件，如下所示 −

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 已更新为新组件。

将 title 属性添加到 ExpenseEntryComponent (src/app/expense-entry/expense-entry.component.ts) 组件。

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 标记。

最终应用程序的输出如下图 −

我们将在进一步了解模板的过程中更新该组件的内容。

模板

Angular组件的组成部分是Template。它用于生成 HTML 内容。模板是带有附加功能的纯 HTML。

附加模板

Template 可以使用 @component 装饰器的元数据附加到 Angular 组件。 Angular 提供了两个元数据来将模板附加到组件。

模板网址

我们已经知道如何使用 templateUrl。它需要模板文件的相对路径。例如，AppComponent 将其模板设置为 app.component.html。

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

template 模板

template 允许将 HTML 字符串放置在组件本身内。如果模板内容很少，那么很容易拥有 Component 类本身，以便于跟踪和维护。

@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) 从应用程序配置。

组件配置

Component装饰器提供了两个选项，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库。通过脚本注册的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>

重新启动应用程序。

应用程序的输出如下−