Angularコンポーネント: 参照渡しか値渡しか

Angularコンポーネント: 参照渡しか値渡しか

Angularでは、@Input() デコレータを使用して親コンポーネントから子コンポーネントにデータを渡すことができ、子コンポーネントは @Output() デコレータを使用して親コメントにイベントを発行することができます。

4min read

Angularでは、@Input()デコレータを使用して親コンポーネントから子コンポーネントにデータを渡すことができ、子コンポーネントは@Output()デコレータを使用して親コメントにイベントを出力できます。このブログ投稿は、@Input() とデコレータのコンテキストで参照によって渡されるか、渡されるか@Outputデコレータのどちらであるかを説明することを目的としています。

まず、以下に示すように、2つのAngularコンポーネントがあると仮定します。

import { Component, Input } from '@angular/core';
@Component({
    selector: 'app-video',
    template: `
        {{data.counter}} {{count}}
     `
})
export class VideoComponent {
    @Input() data: any;
    @Input() count: number;
}

ご覧のとおり、2 つの入力プロパティがあります。

  1. データプロパティでは、オブジェクトを渡します。
  2. countプロパティでは、数値を渡します。

AppComponentから、以下に示すように、両方のプロパティの値を渡します。

import { Component, OnInit } from '@angular/core';
 
@Component({
    selector: 'app-root',
    template: `
  <app-video [data]='data' [count]='count' ></app-video>
  `
})
export class AppComponent implements OnInit {
    data: any = {};
    count: number;
    constructor() {
    }
 
    ngOnInit() {
        this.data.counter = 1;
        this.count = 1;
    }
}

ご覧のとおり、データ(オブジェクト)とカウント(数値)を子コンポーネントに渡しています。データはオブジェクトとして渡されるため、「参照渡し」となり、カウントは数値として渡されるため、「値による渡し」になります。

したがって、オブジェクトや配列などを渡すことは参照渡しであり、数値のようなプリミティブ型の場合は値による渡しです。

理解を深めるために、以下のリストに示すように、子コンポーネントで 2 つのイベントを発生させましょう。

import { Component, Input, EventEmitter, Output } from '@angular/core';
@Component({
    selector: 'app-video',
    template: `
        {{data.counter}} {{count}}
        <button (click)='senddata()'>send data</button>
        <button (click)='sendcount()'>send count</button>
     `
})
export class VideoComponent {
 
    @Input() data: any;
    @Input() count: number;
 
    @Output() dataEvent = new EventEmitter();
    @Output() countEvent = new EventEmitter();
 
    senddata() {
        this.dataEvent.emit(this.data);
    }
    sendcount() {
        this.countEvent.emit(this.count);
    }
}

どちらのイベントでも、同じ@Input()装飾されたプロパティを親コンポーネントに渡します。 dataEvent では、データが返され、countEvent では、count が親コンポーネントに返されます。

親コンポーネントでは、次のようにイベントをキャプチャしています。

import { Component, OnInit } from '@angular/core';
 
@Component({
    selector: 'app-root',
    template: `
  <app-video [data]='data' [count]='count' (dataEvent)='updateData($event)' (countEvent)='updateCount($event)' ></app-video>
  `
})
export class AppComponent implements OnInit {
    data: any = {};
    count: number;
    constructor() {
    }
 
    ngOnInit() {
        this.data.counter = 1;
        this.count = 1;
    }
 
    updateData(d) {
        d.counter = d.counter + 1;
        console.log(this.data.counter);
    }
 
    updateCount(c) {
        c = c + 1;
        console.log(this.count);
    }
}

updateData 関数と updateCount 関数について説明しましょう。これらの関数は、子コンポーネントで発生したイベントをキャプチャします。

updateData関数では、渡されたパラメータの値をインクリメントしていますが、オブジェクトであるため、this.dataの値を更新し、子コンポーネントでは更新された値がレンダリングされます。

updateCount関数では、渡されたパラメータの値をインクリメントしていますが、プリミティブ型であるため、this.countは更新されず、子コンポーネントでは影響は発生しません。

ボタンをクリックしたときの出力として、データの値は増加していますが、カウントの値は増加していないことがわかります。

@Input()デコレータでオブジェクトを渡すと参照として渡され、プリミティブ型を渡すと値として渡されることを要約できます。この記事がお役に立てば幸いです。読んでくれてありがとう。

 この投稿が気に入ったら、共有してください。また、Infragistics Ignite UI for Angular Componentsをまだチェックしていない方は、ぜひチェックしてみてください。彼らはあなたがより速くWebアプリケーションをコーディングするのを助けるために30 +材料ベースのAngularコンポーネントを持っています。

Angular How To
デモを予約