Angular CLI 组件创建与管理教程

一、Angular CLI 简介

Angular CLI 是一个官方提供的命令行工具，用于创建、管理和运行 Angular 应用程序。它极大地简化了开发过程，让开发者可以更专注于编写业务逻辑。

二、使用 Angular CLI 创建组件

在 Angular 项目中，组件是构建用户界面的基本单位。通过 Angular CLI，可以很方便地创建组件。

首先，确保你已经全局安装了 Angular CLI。可以通过以下命令进行安装：

npm install -g @angular/cli

创建一个新的 Angular 项目（如果还没有的话）：

ng new my-angular-app

cd my-angular-app

使用 Angular CLI 创建一个新的组件：

ng generate component my-component

这将会在项目中的 src/app 目录下生成一个新的文件夹 my-component，里面包含组件的模板、样式和类文件。

三、管理组件

在创建了多个组件后，管理这些组件变得尤为重要。Angular CLI 提供了一些命令来帮助我们管理组件。

查看所有组件和模块的树状结构：

ng module:graph

更新组件（比如添加一个新的输入属性）：

ng generate property my-component --name=newProperty

删除组件（需要手动删除生成的文件夹和相关的引用）：

虽然 Angular CLI 没有提供直接的删除组件命令，但你可以手动删除 src/app/my-component 文件夹，并在模块文件中移除该组件的声明和引用。

四、案例讲解：创建一个简单的计数器组件

下面，我们将通过一个简单的计数器组件来演示如何使用 Angular CLI 创建和管理组件。

步骤：

创建一个新的计数器组件：

ng generate component counter

在 counter.component.ts 文件中，添加计数逻辑：


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

@Component({
  selector: 'app-counter',
  templateUrl: './counter.component.html',
  styleUrls: ['./counter.component.css']
})
export class CounterComponent {
  count = 0;

  increment() {
    this.count++;
  }

  decrement() {
    this.count--;
  }
}

在 counter.component.html 文件中，添加模板：


<div>
  <h1>计数器: {{ count }}</h1>
  <button (click)="increment()">增加</button>
  <button (click)="decrement()">减少</button>
</div>

在 app.module.ts 文件中，声明并使用该组件：


import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { CounterComponent } from './counter/counter.component'; // 引入计数器组件

@NgModule({
  declarations: [
    AppComponent,
    CounterComponent // 声明计数器组件
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }