在 Angular 中删除组件
我们将介绍如何在 Angular 中删除组件。
在 Angular 中删除组件
当我们构建一个包含多个组件的 Web 应用程序时，我们可能会遇到由于某种原因我们可能不得不删除一个组件的情况。
使用 Angular CLI 在 Angular 中创建组件非常容易，但是没有使用 Angular CLI 删除组件的选项，因此我们必须手动删除它。
删除一个组件并不容易，因为如果没有正确删除我们组件的所有实例，它可能会使我们的 Web 应用程序崩溃。
本教程通过一个示例，我们将使用 Angular CLI 创建一个组件，然后逐步删除它，以便你更容易理解和遵循所有步骤。
让我们使用以下命令创建一个新应用程序。
angularCopy# angular
ng new my-app
在 Angular 中创建我们的新应用程序后，我们将使用此命令转到我们的应用程序目录。
angularCopy# angular
cd my-app
现在，让我们运行我们的应用程序来检查所有依赖项是否安装正确。
angularCopy# angular
ng serve --open
我们将使用以下命令创建一个新组件。
angularCopy# 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并删除你的组件的导入位置，如下所示。angularCopy
# angular import { NewComponent } from './newcomponent.component'; -
现在删除
@NgModule中的组件声明，如下所示。angularCopy
# angular @NgModule({ imports: [ BrowserModule, FormsModule ], declarations: [ AppComponent, HelloComponent, NewComponent ], bootstrap: [ AppComponent ] })
完成这些步骤后，我们可以使用以下命令启动我们的 Web 应用程序。
angularCopy# angular
ng build
ng serve
它将加载我们的 Web 应用程序而不会出现任何错误。我们可以按照这些简单易行的步骤手动正确地删除组件。
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.
LinkedIn