组件与模板

在Angular中，组件是构建用户界面的基本构建块。创建一个新的组件需要几个简单的步骤：

1. 首先，在Angular项目的根目录下打开命令行工具，执行以下命令创建一个新的组件：

ng generate component <component-name>

其中<component-name>是你想要创建的组件的名称。

2. 执行上述命令后，Angular CLI将在src/app目录下创建一个新的文件夹，其中包含以下文件：

• <component-name>.component.ts: 这是组件的 TypeScript 文件，包含组件的逻辑和属性。
• <component-name>.component.html: 这是组件的模板文件，包含组件的HTML代码。
• <component-name>.component.css: 这是组件的样式文件，包含组件的CSS样式。

3. 在<component-name>.component.ts文件中，定义组件类并实现组件的逻辑。例如：

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

@Component({
  selector: 'app-<component-name>',
  templateUrl: './<component-name>.component.html',
  styleUrls: ['./<component-name>.component.css']
})
export class <ComponentName>Component {
  // 组件的逻辑代码
}

4. 在<component-name>.component.html文件中，编写组件的HTML模板代码，用于渲染组件的UI。例如：

<!-- <component-name>.component.html -->
<div>
  <h1>Hello, World!</h1>
</div>

5. 在需要使用该组件的地方，在父组件的模板文件中添加组件的标签。例如：

<!-- parent.component.html -->
<app-<component-name>></app-<component-name>>

6. 最后，在需要引入该组件的模块中，将该组件添加到declarations数组中。例如：

// parent.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { <ComponentName>Component } from './<component-name>/<component-name>.component';

@NgModule({
  declarations: [
    <ComponentName>Component
  ],
  imports: [
    CommonModule
  ]
})
export class ParentModule { }

通过以上步骤，你就成功创建了一个新的组件，并在父组件中引入并使用了它。现在你可以在父组件的模板中看到新组件的UI。