Morioh
Login
田辺 明美

田辺 明美

10 months ago

Angular でコンポーネントを削除する方法

Angular でコンポーネントを削除する方法を学びます。このチュートリアルは、Angular CLI からコンポーネントを簡単に削除できるようにします。

Angular には、アプリケーション内で作成されたコンポーネントを削除するコマンドがありません。ただし、次の手順に従って、Angular アプリケーションからコンポーネントを削除できます。コンポーネントの作成を示し、作成したコンポーネントをアプリケーションから削除します。

したがって、まず ng コマンドを使用して「demo」コンポーネントを作成したとします。たとえば、次のようなコンポーネントを作成するとします。

ng generate component demo

このコマンドを実行すると、以下のようにいくつかのファイルが作成され、ファイルリストが更新されたことがわかります。

hari@hari-pc:/var/www/me/ang9/appEnv$ ng generate component demo

CREATE src/app/demo/demo.component.css (0 bytes)

CREATE src/app/demo/demo.component.html (19 bytes)

CREATE src/app/demo/demo.component.spec.ts (614 bytes)

CREATE src/app/demo/demo.component.ts (267 bytes)

UPDATE src/app/app.module.ts (388 bytes)

次に、Angular アプリケーションからデモ コンポーネントを削除する方法を説明します。

ステップ 1: インポート行を削除します。

ここでは、アプリの app.module.ts ファイルから import 行を削除する必要があります。

以下のファイルコードで太字で示したように、削除できます。

次の行を削除します。

import { DemoComponent } from './demo/demo.component';

src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
  
import { AppComponent } from './app.component';
import { DemoComponent } from './demo/demo.component';

  
@NgModule({
  declarations: [
    AppComponent,
    DemoComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

ステップ 2: 宣言行を削除します。

ここでは、アプリの app.module.ts ファイル内の @NgModule 宣言配列からコンポーネント宣言行を削除する必要があります。

以下のファイルコードで太字で示したように、削除できます。

次の行を削除します。

import { DemoComponent } from './demo/demo.component';

DemoComponent

src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
  
import { AppComponent } from './app.component';
import { DemoComponent } from './demo/demo.component';

  
@NgModule({
  declarations: [
    AppComponent,
    DemoComponent

  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

ステップ 3: コンポーネント ファイルを手動で削除します。

ここで、以下のリストにあるデモコンポーネントのすべてのファイルを手動で削除する必要があります。

src/app/demo/demo.component.css
src/app/demo/demo.component.html
src/app/demo/demo.component.spec.ts
src/app/demo/demo.component.ts

最後に、コンポーネントの参照を指定した場合は、それを削除する必要があります。

このようにして、Angular CLI からコンポーネントを簡単に削除できます。

#angular

1.45 GEEK