Tip: このガイドでは、すでに基本概念のガイドを読んでいることを前提としています。Angularを初めて使用する場合は、まずそちらをお読みください。
Angularでは、他のコンポーネントでコンポーネントを使用可能にするために、2つの方法がサポートされています。スタンドアロンコンポーネントとして、または NgModule
で。
スタンドアロンコンポーネント
スタンドアロンコンポーネント は、コンポーネントメタデータで standalone: true
を設定したコンポーネントです。
スタンドアロンコンポーネントは、テンプレートで使用されている他のコンポーネント、
ディレクティブ、パイプを直接インポートします。
@Component({ standalone: true, selector: 'profile-photo',})export class ProfilePhoto { }@Component({ standalone: true, imports:[ProfilePhoto], template: `<profile-photo />`})export class UserProfile { }
スタンドアロンコンポーネントは、他のスタンドアロンコンポーネントに直接インポートできます。
Angularチームでは、新規開発にはスタンドアロンコンポーネントを使用することを推奨しています。
NgModules
スタンドアロンコンポーネントが導入される前のAngularコードでは、NgModule
を使用して、他のコンポーネントをインポートし、使用していました。
詳細については、NgModule
ガイド を参照してください。