在 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.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 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