NgModuleは、コンポーネントのセットのコンパイルコンテキストを宣言します。NgModuleは、コンポーネントを関連コードのグループに関連付け、機能単位を形成することができます。各アプリケーションにはルートngModuleがあり、多くの機能ngModelを持つことができます。
独立したコンポーネント
これまでは、コンポーネントを使用するには既存の ngModule を作成または更新する必要がありましたが、新しいスタンドアロン API では、関連する ngModule を作成せずに、コンポーネント、ディレクティブ、パイプを直接記述できるようになりました。 スタンドアロンコンポーネントは、どの ngModule の一部でもなく、他のスタンドアロンコンポーネントや ngModule ベースのコンポーネントと併用できます。 スタンドアロンコンポーネントは自己完結しており、独自のテンプレート依存関係を直接管理します。 ngModule はオプションとなり、焦点は ngModule からコンポーネントへと移行します。
2.1 スタンドアロンコンポーネントの作成
selector: 'app-application-include',
templateUrl: './application-include.component.html',
styleUrls: ['./application-include.component.scss']
})
@Component({
standalone: true,
imports: [SharedModule, BusinessSelectComponent],
selector: 'app-application-include',
templateUrl: './application-include.component.html',
styleUrls: ['./application-include.component.scss']
})- コンポーネントクラスのデコレーターにスタンドアロンフィールドを追加し、standaloneプロパティをtrueに設定します
- コンポーネントを宣言する ngModule の宣言リストからコンポーネントを削除します。
- コンポーネントの依存関係を追加するために、インポートフィールドをコンポーネントのクラスデコレーターに追加します。
2.3 スタンドアロンコンポーネントの依存関係
スタンドアロンコンポーネントは、他のメンバー、パイプ、ディレクティブに依存する場合があります。これらの依存関係は、2つのカテゴリーに分けられます。
他のスタンドアロンコンポーネント
他のモジュールからのコンポーネント
どちらの種類の依存関係も、インポートデコレーター配列を使用してスタンドアロンコンポーネントに追加されます。
@Component({
standalone: true,
imports: [SharedModule, BusinessSelectComponent],
selector: 'app-application-include',
templateUrl: './application-include.component.html',
styleUrls: ['./application-include.component.scss']
})
この場合、SharedModuleは使用されるコンポーネント、パイプ、またはディレクティブのモジュールであり、BusinessSelectComponentはスタンドアロンコンポーネントです。
スタンドアロンコンポーネントの使用
独立コンポーネントを使用する方法は2つあります。
別の独立コンポーネント内
ngModule内
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ApplicationIncludeComponent } from 'src/app/modules/sharing/application-include';
@NgModule({
declarations: [ ],
imports: [
CommonModule,
ApplicationIncludeComponent,
]
})
export class ApplicationManageModule { }ngModuleで使用する場合、declarationsリストに配置することはできず、インポートする必要があります。
フォワードクラスによる循環依存の解決
TypeScriptでは、クラスの宣言順序が重要です。クラスがまだ定義されていない場合、参照することはできません。通常は問題になりませんが、循環参照が避けられない場合もあります。例えば、クラス「A」がクラス「B」を参照しており、「B」も「A」を参照している場合などです。そのうちの1つは先に定義する必要があります。
AngularのforwardRef()関数は、Angularが後で解決できる間接参照を作成します。
これは、例えば、スタンドアロン型の親コンポーネントがスタンドアロン型の子コンポーネントをインポートする場合、またはその逆の場合に発生します。forwardRef関数を使用して、この循環依存を解決することができます。
@Component({ standalone: true,
imports: [ChildComponent],
selector: 'app-parent',
template: `
export class ParentComponent {
hideParent = true;
}
@Component({
standalone: true,
imports: [CommonModule, forwardRef(() => ParentComponent)],
selector: 'app-child',
template: `
})
export class ChildComponent {
@Input() hideParent: boolean;
}このタイプのインポートは、コンポーネントのインスタンス化中に無限再帰を引き起こす可能性があることに注意することが重要です。
この再帰には、どこかの時点で停止する停止条件があることを確認してください。
スタンドアロンコンポーネントでアプリケーションを起動する
スタンドアロンコンポーネントをアプリケーションのルートコンポーネントとして使用すると、
NgModuleを使用せずにAngularアプリケーションを起動できます。これを行うには、bootstrapApplication APIを使用します。
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
bootstrapApplication(AppComponent, { 'a': [] });スタンドアロンコンポーネントを使用したブートストラップアプリケーション
loadComponent を使用することで、任意のルートをレイジーロードすることができます。ロードされるコンポーネントがスタンドアロンコンポーネントである限り、レイジーロードが可能です。
Angularライブラリでのアプリケーション
@Component({
selector: 'app-sticky-table',
standalone: true,
imports: [
CommonModule,
FormsModule,
],
templateUrl: './sticky-table.component.html',
styleUrls: ['./sticky-table.component.scss']
})
コンポーネントを直接エクスポートすることもでき、コードを簡素化できます。
ビジネス側のコードで必要に応じてコンポーネントを導入するのに適しているコンポーネントアプローチを使用することをお勧めします。
コンポーネントアプローチの利点
独立コンポーネントの利便性
- Ng14 以降で利用可能
- 既存のアプリケーションと完全な互換性
- 大きな変更は不要、書き直しも不要
