Angular8 组件和模板
正如我们之前了解到的，
组件是 Angular 应用程序的构建块在。 Angular Component 的主要工作是生成一个名为
view 的网页部分。每个组件都有一个关联的模板，它将用于生成视图。
让我们在本章中学习组件和模板的基本概念。
添加组件
让我们在
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) 组件。
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具有以下内容。
打开
src/app/app.component.html 并包含新创建的组件。
<h1>{{ title }}</h1>
<app-expense-entry></app-expense-entry>
这里，
app-expense-entry 是选择器值，它可以用作常规 HTML 标签。
最后，应用程序的输出如下所示-
我们会在学习更多模板的过程中更新组件的内容。
模板
Angular 组件的组成部分是
模板。它用于生成 HTML 内容。
模板是带有附加功能的纯 HTML。
附上模板
Template 可以使用
@component 装饰器的元数据附加到 Angular 组件。 Angular 提供了两个元数据来将模板附加到组件上。
templateUrl
我们已经知道如何使用 templateUrl。它需要模板文件的相对路径。例如，AppComponent 将其模板设置为 app.component.html。
templateUrl: './app.component.html',
模板
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) 来自应用程序配置。
组件配置
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 样式表，因为它支持多个值。
包括引导程序
让我们使用
styles 选项将引导程序包含到我们的
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 库。通过
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>
这里，
使用引导程序导航和容器。
打开
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>
重新启动应用程序。
应用程序的输出如下-
我们将在下一章改进应用程序以处理动态费用条目。
