在 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` 中的元件宣告，如下所示。