在 Angular 中删除组件

Rana Hasnain Khan 2022年4月20日
在 Angular 中删除组件

我们将介绍如何在 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.tsnewcomponent.component.htmlnewcomponent.component.css。现在,让我们讨论如何删除这个组件。

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

  • 删除组件 newcomponent 的文件夹,包括其中的所有文件。
  • 如果你的组件没有单独的文件夹,你可能需要删除与你的组件名称相同的文件。在我的示例中,我们将删除 3 个文件 newcomponent.component.tsnewcomponent.component.htmlnewcomponent.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 avatar Rana Hasnain Khan avatar

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

相关文章 - Angular Component