Angular で単純な独立したコンポーネントを作成して使用する方法について話しましょう

この記事では、Angular の独立したコンポーネントを理解し、簡単な独立したコンポーネントを作成する方法と、Angular アプリケーションでそれらを使用する方法を紹介します。

Angular を学習している場合は、独立したコンポーネント (コンポーネント) について聞いたことがあるかもしれません。名前が示すように、独立コンポーネントは、独立して使用および管理できるコンポーネントであり、他のコンポーネントに含めたり、他のコンポーネントから参照したりできます。

コンポーネントの作成

Angular コンポーネントを作成するには、まず Angular CLI ツールを使用して空のコンポーネント スケルトンを生成する必要があります。 hello-world という名前のコンポーネントを作成するとします。次のコマンドを実行できます。

ng generate component hello-world

このコマンドは、 hello-world フォルダーを自動的に生成します。コンポーネント クラス、HTML テンプレート、スタイル シートなど、コンポーネントに必要なすべてのファイルが含まれています。 [関連チュートリアルの推奨事項: "angular チュートリアル"]

これで、hello-world.component.ts ファイルを編集してコンポーネント クラスを定義できます。次のコード例は、最小限のコンポーネント定義を示しています。

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

@Component({
    selector: 'app-hello-world',
    template: &#39;<p>Hello World!</p>&#39;,
})
export class HelloWorldComponent {
}

このコンポーネント定義では、@Component デコレーターを使用してコンポーネントのセレクター (セレクター) を指定します。これは、コンポーネントのタグ名でもあります。テンプレート内のコンポーネント。同時に、「Hello World!」段落タグを表示するだけのコンポーネントの HTML テンプレートも決定しました。

次に、この新しいコンポーネントを使用するように app.component.html ファイルを変更します。 <app-hello-world> タグをファイル内の適切な場所に追加するだけです。

<app-hello-world></app-hello-world>

ここでアプリケーションを開くと、ページに「Hello World!」が表示されるはずです。

コンポーネント入力

コンポーネントを使用するときは、通常、コンポーネントにデータを渡す必要があります。これは、コンポーネントの入力プロパティを通じて実現できます。

コンポーネントの入力プロパティを定義するには、コンポーネント クラスで @Input() デコレータを使用してプロパティを定義します。たとえば、コンポーネントのメッセージをユーザー指定の値に設定したいとします。

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

@Component({
    selector: 'app-hello-world',
    template: &#39;<p>{{message}}</p>&#39;,
})
export class HelloWorldComponent {
    @Input() message: string;
}

この変更された HelloWorldComponent では、message 入力を追加しました。 property を作成し、それをテンプレートで使用してメッセージを表示します。

このコンポーネントを使用するときに、メッセージをプロパティとして渡すことができます。例:

<app-hello-world message="Welcome to my app!"></app-hello-world>

コンポーネント出力

入力プロパティと同様に、コンポーネントは出力イベントを通じて他のコンポーネントと通信することもできます。出力イベントを定義するには、@Output() デコレーターと EventEmitter クラスを使用します。

たとえば、コンポーネントにボタンを作成し、ボタンがクリックされたときにイベントをトリガーすると仮定すると、次のように定義できます。

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

@Component({
    selector: 'app-button-with-click-event',
    template: &#39;<button (click)="onClick()">Click me</button>&#39;,
})
export class ButtonWithClickEventComponent {
    @Output() buttonClick = new EventEmitter<any>();

    onClick(): void {
        this.buttonClick.emit();
    }
}

このコンポーネントでは、出力属性buttonClick、イベントは onClick() メソッドでトリガーされます。

このコンポーネントを使用するときは、その buttonClick イベントをリッスンするだけです:

<app-button-with-click-event (buttonClick)="onButtonClick()"></app-button-with-click-event>

最後に、onButtonClick(( ) メソッドを実装します。イベントに応答するため。

このブログ投稿では、Angular スタンドアロン コンポーネントの概念とその作成方法と使用方法について詳しく説明しました。最初に、独立コンポーネントとは何か、そして Angular 独立コンポーネントを使用する理由を紹介しました。

新しいスタンドアロン コンポーネントを簡単に作成するために Angular CLI がどのように役立つかをさらに調査し、入力、出力、イベントを使用してコンポーネントをより柔軟で多用途にする方法について説明しました。

最後に、Angular の独立したコンポーネントにおけるモジュール式プログラミング手法の重要性を強調します。アプリケーションを小さな独立したコンポーネントに分割することで、コード ベースをより適切に管理し、より読みやすく保守しやすいコードを実現できます。

各章のコード例を使用して、独自の独立したコンポーネントの構築を開始し、アプリケーションに機能と再利用性を追加できます。

プログラミング関連の知識について詳しくは、プログラミング入門をご覧ください。 ！

以上がAngular で単純な独立したコンポーネントを作成して使用する方法について話しましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。