展示一个 Angular 组件模板

在上一篇文章中，我们介绍了如何创建一个新的 Angular 组件。本文将要把这个组件呈现到主页面上。

展示组件模板

book 组件模板只包含一行代码：

<p>book works!</p>

现在，我们就把这个组件模板的内容渲染到页面上，替换默认的页面内容:

1. 使用 VS Code 打开 my-app 项目，导航到 src/app 目录中。
2. 打开应用的主组件的组件模板文件, app.component.html.
3. 移除app.component.html文件中的所有内容，并输入下面一行代码：

<app-book></app-book>.

在输入部分文字的时候，VS Code 会自动提示候选内容，此时可以用上下键选择选择要输入的内容，按回车键后，VS Code 会自动补齐内容。

自动补齐

4. 使用 ng serve 命令运行项目，打开首页，book 组件模板的内容，已经出现在首页上。

首页展示 book 组件

展示组件类的属性

我们已经成功地把 book 组件模板的内容显示到应用的首页上。美中不足的是，组件模板的内容是一行固定的文字。接下来，我们让这行文字变得动态一点儿：显示一本书的名字。

1. 在 VS Code 中，打开 /src/app/book/book.component.ts 文件。在文件的头部，加入下面一行代码：

import { Input } from "@angular/core”;

在 BookComponent 类定义中，加入下面一行代码：

@Input() name: string;

完整代码如下所示：

import { Component, OnInit } from '@angular/core’;
import { Input } from "@angular/core”;

@Component({
  selector: 'app-book’,
  templateUrl: './book.component.html’,
  styleUrls: ['./book.component.css’]
})
export class   implements OnInit {

  @Input() name: string;

  constructor() { }

  ngOnInit(): void {
  }

}

@Input 表示属性的值是由其他组件传入的。我们把 @Input 附加到 name 属性上，表示其他组件可以把图书名称传入进来，动态设置属性的值。string 定义了属性的数据类型。

2. 打开 src/app/book/book.component.html 文件，添加 {{name}} ，展示书名。

<p>{{name}} book works!</p>

3. 打开 src/app/app.component.ts ，在组件类的定义中，添加 bookName 属性。

…

export class AppComponent {
  title = 'Hello Angular 10’;
  bookName = "《三体》”;
}

4. 打开 src/app/app.component.html，编辑主组件模板，修改后的内容如下所示：

<app-book [name]="bookName"></app-book>

• [name]：表示 book 组件类的 name 属性。
• bookName：表示 AppComponent 的类属性。

[name]="bookName" 表示把 book 组件类的 name 属性关联到主组件的 bookName 属性。当应用运行时，主组件 bookName 属性的值会注入到 book 组件类的 name 属性；然后，book 组件模板会把 {{name}} 替换为book 组件类的 name 属性值。这样，就完成了属性值的动态设置。

5. 返回浏览器，看看首页内容的变化。

首页展示 book 组件的 name 属性