Angular 8 教程: Angular 8 组件和模板
正如我们之前了解到的，组件是Angular应用程序的基本模块。Angular Component的主要工作是生成网页的视图。每个组件都有一个关联的模板，它将用于生成视图。
让我们在本节学习组件和模板的基本概念。
添加一个组件
我们在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)
在上面的命令中,一共做了如下几件事情:
1.ExpenseEntryComponent在src/app/expense-entry文件夹下创建。
2.创建组件类、模板和样式表。
3.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标记。最后，应用程序的输出如下所示
我们将在学习模板的过程中更新组件的内容。
模板
Angular组件的重要组成部分是模板。它用于生成HTML内容。模板是带有附加功能的普通HTML。
附加模板
可以使用@component装饰器的元数据将模板附加到Angular组件。Angular提供了两个元数据来将模板附着到组件。
templateUrl
我们已经知道如何使用templateUrl。它需要模板文件的相对路径。例如，AppComponent将其模板设置为app.component.html。
templateUrl: './app.component.html',
模板允许将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)从应用程序配置。
组件配置
组件装饰器提供了两个选项，样式和样式URL，为其模板提供CSS样式信息。
Styles − styles option is used to place the CSS inside the component itself.
styles: ['h1 { color: '#ff0000'; }']
styleUrls − styleUrls is used to refer external CSS stylesheet. We can use multiple stylesheet as well.
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"
}在这里，样式选项setssrc/style.css作为全局CSS样式表。我们可以包含任意数量的CSS样式表，因为它支持多个值。
引入bootstrap
让我们使用样式选项将bootstrap包含到我们的ExpenseManager应用程序中，并更改默认模板以使用引导组件。
打开命令提示符，转到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>在这里，使用引导导航和容器。
打开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>重新启动应用程序。
应用程序的输出如下:
我们将在下一章改进应用程序以处理动态费用输入。