迹忆客 专注技术分享

我们将介绍如何在 Angular 中删除组件。

在 Angular 中删除组件

当我们构建一个包含多个组件的 Web 应用程序时，我们可能会遇到由于某种原因我们可能不得不删除一个组件的情况。

使用 Angular CLI 在 Angular 中创建组件非常容易，但是没有使用 Angular CLI 删除组件的选项，因此我们必须手动删除它。

删除一个组件并不容易，因为如果没有正确删除我们组件的所有实例，它可能会使我们的 Web 应用程序崩溃。

本文通过一个示例，我们将使用 Angular CLI 创建一个组件，然后逐步删除它，以便你更容易理解和遵循所有步骤。

让我们使用以下命令创建一个新应用程序。

$ ng new my-app

在 Angular 中创建我们的新应用程序后，我们将使用此命令转到我们的应用程序目录。

$ cd my-app

现在，让我们运行我们的应用程序来检查所有依赖项是否安装正确。

$ ng serve --open

我们将使用以下命令创建一个新组件。

$ ng g c newcomponent

你可以看到在 App 文件夹中创建了一个新文件夹 newcomponent，其中包含 3 个文件 newcomponent.component.ts、newcomponent.component.html 和 newcomponent.component.css。现在，让我们讨论如何删除这个组件。

请按照以下步骤轻松删除组件，而不会在我们的 Web 应用程序中出现任何错误。

• 删除组件 newcomponent 的文件夹，包括其中的所有文件。

• 如果你的组件没有单独的文件夹，你可能需要删除与你的组件名称相同的文件。在我的示例中，我们将删除 3 个文件 newcomponent.component.ts、newcomponent.component.html 和 newcomponent.component.css。

• 打开 app.module.ts 并删除你的组件的导入位置，如下所示。

  import { NewComponent } from './newcomponent.component';
  

• 现在删除@NgModule 中的组件声明，如下所示。

   @NgModule({
   imports:      [ BrowserModule, FormsModule ],
   declarations: [ AppComponent, HelloComponent, NewComponent ],
   bootstrap:    [ AppComponent ]
  })
  

完成这些步骤后，我们可以使用以下命令启动我们的 Web 应用程序。

$ ng build
$ ng serve

它将加载我们的 Web 应用程序而不会出现任何错误。我们可以按照这些简单易行的步骤手动正确地删除组件。