1. 什么是Angular独立组件

Angular中的独立组件又称为UI组件，指的是一个可以独立使用、可重用的模块，具有特定的输入和输出。每个独立组件都由对应的HTML模板、CSS样式和Component组成，可以在同一个应用中多次使用，也可以在不同的应用程序中使用。

2. 创建一个新的Angular独立组件

创建一个独立组件需要使用Angular CLI，在终端中执行以下命令：

ng generate component [component-name]

这会为我们生成一堆默认代码。

2.1 模板文件

模板文件指的是被定义组件的HTML文件，它定义了组件所需的HTML内容和DOM结构。对于一个简单的组件，我们可以只包含一些静态文本和变量绑定。

例如，下面是一个简单的“hello world”组件，它根据用户名来显示一条欢迎消息：

// app.component.html
Hello, {{name}}!

2.2 样式表

样式表指的是被定义组件的CSS文件，它定义了用于呈现组件的CSS样式。您可以使用全局CSS样式来为整个应用程序定义样式，但使用组件特定的CSS样式可以更好地封装组件并确保应用的模块化和可维护性。

对于一个简单的组件，我们可以将样式直接写在组件的元数据（metadata）中：

// app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
name = 'Angular';
}

2.3 独立组件的元数据

元数据指的是Define Component定义组件时用到的数据，它决定了组件的行为和属性。通常，元数据包括以下内容：

- selector：组件的选择器，它指定了Angular在HTML中查找自定义元素的方式。

- templateUrl：组件的HTML模板，它定义了组件如何呈现。

- styleUrls：组件的CSS样式表，它定义了组件的外观。

- providers：组件使用的服务提供者，它可以向组件提供依赖项。

- animations：定义组件的动画效果。

- inputs：定义组件的输入属性，它们用于从父组件传递数据到子组件。

- outputs：定义组件的输出属性，它们用于从子组件传递数据到父组件。

- directives：定义在组件内使用的指令。

- encapsulation：定义组件的样式封装方式。

3. 如何使用Angular独立组件

创建组件后，我们可以直接在各个HTML中使用它，只需要在HTML中使用组件的选择器即可。例如，如果我们想在AppComponent组件中使用HelloComponent组件，可以这样写：

// app.component.html
<app-hello></app-hello>

这个组件会显示一个消息欢迎当前用户，我们可以使用@Input() decorator 来设定输出一个 message 属性，然后在 AppComponent 中使用该属性:

// hello.component.html
{{ message }}

// 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() message: string;
}

在创建好了HelloComponent之后，在AppComponent的HTML中使用<app-hello>，并调用该组件时通过建立属性的方式来传递一个message。

// app.component.html
<app-hello [message]="myMessage"></app-hello>

这个组件的功能就是用不同的message来欢迎用户。在AppComponent的.ts文件中，我们需要定义一个名为myMessage的新属性。

// app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
myMessage = 'WELCOME';
}

在上述例子中，Hello组件从该message属性中获取值，并用于显示一条消息。

结语

独立组件是Angular中的一个强大的功能，它可以使我们将应用程序划分为更小的可维护组件，提高代码的可读性和可维护性。本文讲解了如何创建和使用一个简单的独立组件来向读者展示Angular的强大功能并加深对于Angular组件化理念的理解。