ホームページ  >  記事  >  ウェブフロントエンド  >  Angularコンポーネント間の値の転送と通信の詳細な説明

Angularコンポーネント間の値の転送と通信の詳細な説明

php中世界最好的语言
php中世界最好的语言オリジナル
2018-04-16 10:22:061723ブラウズ

今回は、Angular コンポーネント間の値の転送と通信の使用方法について詳しく説明します。Angular コンポーネント間の値の転送と通信に関する 注意事項 は何ですか。実際のケースを見てみましょう。

この記事では、Angular がさまざまなコンポーネントでどのように値を転送し、通信するかを主に紹介します。主に親子コンポーネントと非親子コンポーネントに分かれます。

親コンポーネントと子コンポーネント間のパラメータと通信方法​​

イベント通信を使用する (EventEmitter、@Output):

シナリオ: 通信は親コンポーネントと子コンポーネントの間で実行でき、通常は子コンポーネントで親コンポーネントにメッセージを渡すために使用されます。 手順:

子コンポーネントはイベント EventEmitter オブジェクトを作成し、 @output を使用して公開します。親コンポーネントは子コンポーネント @output からのメソッドをリッスンして、イベントを処理します。
  1. コード:
  2.  // child 组件
      @Component({
       selector: 'app-child',
       template: '',
       styles: [``]
      })
      export class AppChildComponent implements OnInit {
       @Output() onVoted: EventEmitter<any> = new EventEmitter();
       ngOnInit(): void {
        this.onVoted.emit(1);
       }
      }
      // parent 组件
      @Component({
       selector: 'app-parent',
       template: `
        <app-child (onVoted)="onListen($event)"></app-child>
       `,
       styles: [``]
      })
      export class AppParentComponent implements OnInit {
       ngOnInit(): void {
        throw new Error('Method not implemented.');
       }
       onListen(data: any): void {
        console.log('TAG' + '---------->>>' + data);
       }
      }

    @ViewChild と @ViewChildren を使用します:

シナリオ: 通常、親コンポーネントが子コンポーネントに情報を渡すために、または親コンポーネントが子コンポーネントのメソッドを呼び出すために使用されます。 手順:

親コンポーネントで子コンポーネントを使用します

親コンポーネントで @ViewChild を使用して、子コンポーネントのオブジェクトを取得します。

  1. 親コンポーネントは、子コンポーネント オブジェクトを使用して子コンポーネントを制御します (情報を渡すか、メソッドを呼び出します)。

  2. コード:

    rrree
  3. 親子コンポーネント以外のパラメータの受け渡しと通信メソッド

ルーティングパラメータによる

シナリオ: あるコンポーネントは、リストや編集などのルーティングを通じて別のコンポーネントにジャンプできます

手順:

コンポーネント A は、routerLink、router.navigate、または router.navigateByUrl を使用してコンポーネント B にジャンプします。コンポーネント B は、これらのパラメータを受け入れます。 このメソッドは、コンポーネント間のパラメータの転送にのみ適しています。パラメータは一度受信されると変更されません

。 コード

配送方法

ルーターリンク
    りぃ
  1. router.navigate

    // 子组件
    @Component({
     selector: 'app-child',
     template: '',
     styles: [``]
    })
    export class AppChildComponent2 implements OnInit {
      data = 1;
      ngOnInit(): void {
     }
     getData(): void {
      console.log('TAG' + '---------->>>' + 111);
     }
    }
    // 父组件
    @Component({
     selector: 'app-parent2',
     template: `
      <app-child></app-child>
     `,
     styles: [``]
    })
    export class AppParentComponent2 implements OnInit {
     @ViewChild(AppChildComponent2) child: AppChildComponent2;
     ngOnInit(): void {
      this.child.getData(); // 父组件获得子组件方法
      console.log('TAG'+'---------->>>'+this.child.data);// 父组件获得子组件属性
     }
    }
    router.navigateByUrl
  2. <a routerLink=["/exampledetail",id]></a>
    routerLink=["/exampledetail",{queryParams:object}]
    routerLink=["/exampledetail",{queryParams:'id':'1','name':'yxman'}];
  3. パラメータ転送側がパラメータを渡した後、受信側には次の 2 つの受信方法があります:

    スナップショット
  4. りぃ
queryParams

this.router.navigate(['/exampledetail',id]);
this.router.navigate(['/exampledetail'],{queryParams:{'name':'yxman'}});

サービスを使用して通信します。つまり、2 つのコンポーネントが同時にサービスを注入します

シナリオ: 通信する必要がある 2 つのコンポーネントは、親子コンポーネントや隣接するコンポーネントではありません。もちろん、任意のコンポーネントにすることもできます。

手順:

新しいサービスを作成すると、コンポーネント A とコンポーネント B が同時にサービスに挿入されます

コンポーネント A はサービスからデータを取得するか、サービスにデータを送信しようとします

コンポーネント B はサービスからデータを取得しますサービスにアクセスするか、サービスにデータを送信したいと考えています。

コード:

rrree

    メッセージサービスモジュール
  1. シナリオ: これには、すべてのコンポーネントが通信できる必要があるプロジェクト、または 1 つのコンポーネントが複数のコンポーネントと通信できる必要があり、パラメーターをルーティング経由で渡すことができないプロジェクトが含まれます。
  2. デザイン方法:

  3. RxJs を使用してサービス モジュール MessageService を定義すると、すべての情報がこのサービスに登録されます

  4. メッセージを送信する必要がある場合はサービスのメソッドを呼び出します

情報を受信する必要がある場合はそれを呼び出します。情報を受信するメソッド、Subscription オブジェクトを取得し、情報をリッスンします

もちろん、各コンポーネントが破棄されるときは

    this.router.navigateByUrl('/exampledetail/id');
    this.router.navigateByUrl('/exampledetail',{queryParams:{'name':'yxman'}});
  1. が必要です。 コード:

    import { ActivateRoute } from '@angular/router';
    public data: any;
    export class ExampledetailComponent implements OnInit { 
      constructor( public route: ActivateRoute ) { };
      ngOnInit(){
        this.data = this.route.snapshot.params['id'];
      };
    }
    ここでの MessageService は、ブロードキャスト メカニズムを使用してすべてのコンポーネント間で情報を転送するのと同等です。数値、文字列、オブジェクトを問わず、転送することができ、伝播速度も非常に高速です。
  2. この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

    推奨読書:
  3. jsカプセル化操作クラスの手順を詳しく解説

    無効なタグselected="selected"属性への対処方法

以上がAngularコンポーネント間の値の転送と通信の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。