Angular のコンポーネントを理解するための基本ガイド

Angular コンポーネントは Angular アプリケーションの基盤であり、ユーザー インターフェイスのモジュール式の再利用可能な部分を構築する方法を提供します。このガイドでは、Angular コンポーネントの構造からベスト プラクティスまで、Angular コンポーネントの基本について説明します。 Angular を初めて使用する場合でも、復習したい場合でも、この記事は Angular のコンポーネントの基本を理解するのに役立ちます。

Angular コンポーネントとは何ですか?

Angular では、コンポーネントはユーザー インターフェイス (UI) の一部を制御するクラスです。ボタン、タブ、入力、フォーム、ドロワー (実際には UI のあらゆる部分) について考えてみましょう。各コンポーネントは自己完結型であり、以下で構成されます:

1. HTML テンプレート: UI のレイアウトと構造を定義します。
2. CSS スタイル: コンポーネントの外観とスタイルを設定します。
3. TypeScript クラス: コンポーネントのロジックとデータが含まれます。
4. メタデータ: Angular がコンポーネントを認識して使用するための構成の詳細を提供します。

コンポーネントは、それぞれがヘッダー、サイドバー、カードなどのページの特定の部分を表すことができるため、モジュラー アプリケーションの作成に不可欠です。

Angular コンポーネントの基本構造

Angular コンポーネントは @Component デコレーターを使用して定義され、必要なテンプレート、スタイル、セレクターで構成されます。基本的な例を次に示します:

import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
export class ExampleComponent {
  title: string = 'Hello, Angular!';

  getTitle() {
    return this.title;
  }
}

この例では:

• selector はコンポーネントを表す HTML タグです。
• templateUrl は、HTML テンプレート ファイルを指します。
• styleUrls はコンポーネントの CSS ファイルを参照します。
• ExampleComponent クラスは、コンポーネントのデータとロジックを保持します。

一般的なコンポーネントのフォルダー構造

Angular プロジェクトは通常、コンポーネントとその関連ファイルを 1 つのフォルダーに整理し、Angular CLI の使用時に自動的に作成されます。コンポーネントの一般的なフォルダー構造には次のものが含まれます:

• example.component.ts: TypeScript クラスを定義します。
• example.component.html: HTML テンプレートが含まれます。
• example.component.css: コンポーネントのスタイルを保持します。
• example.component.spec.ts: コンポーネントのテストが含まれます。

コンポーネントのライフサイクル

Angular コンポーネントには、開発者がさまざまな段階でアクションを実行できるようにするフックを備えたライフサイクルがあります。一般的に使用されるライフサイクル フックには次のものがあります。

• ngOnInit: コンポーネントが初期化された後に呼び出されます。
• ngOnChanges: データ バインドされたプロパティが変更されるとトリガーされます。
• ngOnDestroy: Angular がコンポーネントを破棄する直前に呼び出されます。

たとえば、ngOnInit の使用方法は次のとおりです。

import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
export class ExampleComponent {
  title: string = 'Hello, Angular!';

  getTitle() {
    return this.title;
  }
}

ライフサイクル フックは柔軟性を提供し、コンポーネントのライフサイクルの特定の段階でロジックを管理しやすくします。

コンポーネント間の通信

実際のアプリケーションでは、データを共有したりアクションをトリガーしたりするために、コンポーネントが相互に対話する必要があることがよくあります。 Angular は、コンポーネント通信のためのいくつかのメソッドを提供します。

1. @Input と @Output

• @Input: 親コンポーネントが子コンポーネントにデータを渡すことを許可します。
• @Output: 子コンポーネントがその親にイベントを送信できるようにします。

例:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-lifecycle',
  template: '<p>Lifecycle example</p>',
})
export class LifecycleComponent implements OnInit {
  ngOnInit() {
    console.log('Component initialized!');
  }
}

// child.component.ts
import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `<button (click)="sendMessage()">Send Message</button>`,
})
export class ChildComponent {
  @Input() childMessage: string;
  @Output() messageEvent = new EventEmitter<string>();

  sendMessage() {
    this.messageEvent.emit('Message from child!');
  }
}

2.サービスベースのコミュニケーション

コンポーネントが親子関係にない場合、Angular サービスはデータとロジックを共有する簡単な方法を提供します。サービスはデフォルトでシングルトンです。つまり、アプリ全体でインスタンスが 1 つだけ存在します。

<!-- parent.component.html -->
<app-child [childMessage]="parentMessage" (messageEvent)="receiveMessage($event)"></app-child>

さまざまなコンポーネントでのサービスの使用:

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class SharedService {
  private messageSource = new BehaviorSubject<string>('Default Message');
  currentMessage = this.messageSource.asObservable();

  changeMessage(message: string) {
    this.messageSource.next(message);
  }
}

// component-one.ts
import { Component } from '@angular/core';
import { SharedService } from '../shared.service';

@Component({
  selector: 'app-component-one',
  template: `<button (click)="changeMessage()">Change Message</button>`,
})
export class ComponentOne {
  constructor(private sharedService: SharedService) {}

  changeMessage() {
    this.sharedService.changeMessage('Hello from Component One');
  }
}

Angular コンポーネントのベスト プラクティス

1. 単一の責任: 可読性と保守性を向上させるために、各コンポーネントが 1 つの責任を持つようにします。
2. 機能モジュール: 関連するコンポーネントを機能モジュールに整理します。これにより、遅延読み込みが容易になります。
3. 変更検出の最適化: パフォーマンスを向上させるために、頻繁に更新されないコンポーネントには OnPush 変更検出を使用します。
4. 通信のためのサービスの使用を制限する: サービスはデータの共有に役立ちますが、サービスに過度に依存するとコードが密結合になる可能性があります。可能な限り、親子通信には @Input と @Output を使用してください。
5. テンプレートの簡素化: テンプレートを可能な限り単純にし、複雑なロジックをコンポーネント クラスに移動します。

結論

Angular コンポーネントは、スケーラブルなモジュール型アプリケーションの構築の中核です。構造、ライフサイクル、通信方法を理解することで、理解しやすく、構築しやすい効率的で保守可能なアプリケーションを作成できます。

次の記事では、Angular コンポーネントのライフサイクルをさらに詳しく説明し、各フックとそれを使用してコンポーネントを効果的に管理する方法を検討します。 Angular の強力なライフサイクル機能をさらに詳しく見ていきますので、ご期待ください!

以上がAngular のコンポーネントを理解するための基本ガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。