在 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