7 基础组件之创建和使用组件

在上一章中，我们成功搭建了Angular开发环境并创建了我们的第一个Angular项目。现在，让我们来深入了解Angular应用的核心组成部分——组件。

什么是组件

组件是Angular应用的基本构建块。每个组件都是一个自包含的、可以复用的代码单元，通常包含HTML模板、样式和类逻辑。它们帮助我们将复杂的用户界面分割成小的、可管理的部分。

创建组件

在Angular中，可以使用Angular CLI命令快速创建组件。假设我们要创建一个名为 hello 的组件，可以在项目的根目录下运行以下命令：

ng generate component hello

或者使用简写命令：

ng g c hello

此命令执行后，Angular CLI 会在 src/app 目录下生成一个 hello 文件夹，里面包含以下文件：

• hello.component.ts：组件的逻辑代码
• hello.component.html：组件的模板
• hello.component.css：组件的样式
• hello.component.spec.ts：测试文件

生成的组件代码如下所示：

hello.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-hello',
  templateUrl: './hello.component.html',
  styleUrls: ['./hello.component.css']
})
export class HelloComponent {
  message: string = 'Hello, Angular!';
}

hello.component.html

<h1>{{ message }}</h1>

hello.component.css

h1 {
  color: blue;
}

这个简单的组件定义了一个包含 message 属性的类，并在模板中用 {{ message }} 表达式显示它。

使用组件

要在应用中使用我们刚创建的 hello 组件，你需要在父组件模板中引用它。通常我们会在 app.component.html 里进行引用。你可以将以下内容添加到 app.component.html 文件中：

<app-hello></app-hello>

现在，当你运行应用时，你应该能看到“Hello, Angular!”以蓝色显示。

运行应用

确保你的开发服务器正在运行，打开终端并执行：

ng serve

然后打开浏览器，访问 http://localhost:4200/。你将看到你的hello组件正常渲染。

组件之间的交互

在实际开发中，组件之间的交互非常重要。可以通过 @Input 和 @Output 装饰器来实现 parent-child（父子）组件之间的数据传递。

父组件向子组件传值

假设我们希望通过父组件传递一个 greeting 信息给子组件。可以先在 hello 组件的类型定义中添加一个 @Input() 属性。

更新 hello.component.ts：

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-hello',
  templateUrl: './hello.component.html',
  styleUrls: ['./hello.component.css']
})
export class HelloComponent {
  @Input() greeting: string = 'Hello from Parent!';
}

然后在 app.component.ts 中设置要传递的值：

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  greetingMessage: string = 'Hello, Angular from Parent!';
}

最后，在 app.component.html 中传递这个值给子组件：

<app-hello [greeting]="greetingMessage"></app-hello>

更新后的 hello.component.html：

<h1>{{ greeting }}</h1>

测试组件

当你再次运行应用，你应该能看到 greetingMessage 的内容在 hello 组件中正常渲染。

结语

通过本章的学习，我们创建了一个基本的Angular组件，并在父组件中使用它。我们还探讨了父组件如何通过属性传递数据到子组件。

在接下来的章节中，我们将深入了解组件的模板和样式，以进一步丰富组件的功能和表现。