在 Angular 中删除组件

Rana Hasnain Khan 2022年4月20日

Angular Angular Component

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

在 Angular 中删除组件

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

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

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

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

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

# angular
ng new my-app

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

# angular
cd my-app

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

# angular
ng serve --open

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

# angular
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 并删除你的组件的导入位置，如下所示。
```
# angular
import { NewComponent } from './newcomponent.component';
```

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

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

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

# angular
ng build
ng serve

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

作者： Rana Hasnain Khan

Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.

在 Angular 中删除组件

在 Angular 中删除组件

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

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

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

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

相关文章 - Angular Component

在 Angular 中删除组件

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

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

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

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

相关文章 - Angular Component

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

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

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

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