Angular 2 のコンポーネント間でデータを渡す
- 入力デコレータを使用して、Angular 2 の親コンポーネントから子コンポーネントにデータを渡する
-
出力と
EventEmitterを使用して、Angular 2 の子コンポーネントから親コンポーネントにデータを渡する - サービスを使用して Angular 2 のコンポーネント間でデータを渡す
この記事では、Angular 2 の 2つのコンポーネント間でデータを渡す方法を説明します。
入力デコレータを使用して、Angular 2 の親コンポーネントから子コンポーネントにデータを渡する
Input() デコレータを介した親から子は、親コンポーネントがその子コンポーネントと通信する必要がある場合に使用されます。親コンポーネントは、子コンポーネントに対してデータを送信するか、アクションを実行します。
これは、@Input() デコレータを使用してテンプレートを介してデータを提供することで機能します。これは、コンポーネントの入力設定を変更および追跡するために使用されます。
次のコード例は、Angular 2 の入力デコレータを使用して 2つのコンポーネント間にこのタイプの関係を作成する方法を示しています。
TypeScript コード（App.component.ts）：
import { Component } from '@angular/core';
import { Demo } from './Demo';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
DemoEx:Demo[] = [
new Demo('First Example'),
new Demo('SECOND Example')
];
}
TypeScript コード（input.component.ts）：
import { Component, OnInit, Input} from '@angular/core';
import { Demo } from '../Demo';
@Component({
selector: 'app-demo',
templateUrl: './input.component.html',
styleUrls: ['./input.component.css']
})
export class inputCom implements OnInit {
@Input() Demo: Demo;
constructor() { }
ngOnInit() {
}
}
HTML コード（app.component.html および input.component.html）：
<main>
<section>
<div class="card">
<header>{{Demo.name}}</header>
</div>
</section>
</main>
<h3>Parent to child Component Interaction in Angular</h3>
<app-demo *ngFor="let Demo of DemoEx" [Demo]="Demo"></app-demo>
ここをクリックして、上記のコードのライブデモを確認してください。
出力と EventEmitter を使用して、Angular 2 の子コンポーネントから親コンポーネントにデータを渡する
EventEmitter は、カスタムイベントを発行できるクラスです。これは Angular 2 コンポーネントであり、Angular 2 アプリケーションで観察可能なパターンを使用できるようにします。
このコンポーネントは、従来のコールバックパターンに代わるものを提供し、オブザーバブルが不要になったときにサブスクライブを解除することで、変更検出をトリガーするプロセスを簡素化します。
次の例は、親コンポーネントがイベントをサブスクライブし、それに応じてその動作を変更する方法を示しています。
TypeScript コード（parent.component.ts）：
import { Component, Input, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'parent',
template: '<button (click)="DemoEx()">Click here to go to the next component</button>',
})
export class ParentComponent {
@Input() name: string;
@Output() SampleEx = new EventEmitter<string>();
DemoEx() {
this.SampleEx.emit(this.message)
}
message: string = "You are in Child Component";
}
TypeScript コード（app.component.ts）：
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
name = 'Angular';
message:string='';
NextCom($event) {
this.message = $event;
}
}
HTML コード（app.component.html）：
<parent name="{{ name }}" (SampleEx)="NextCom($event)"></parent>
<br/>
<br/>
{{message}}
上記の例のライブデモンストレーションを確認するには、ここをクリックしてください。
サービスを使用して Angular 2 のコンポーネント間でデータを渡す
サービスは、Injectable インターフェイスを実装するクラスです。Injectable Decorator で注釈が付けられたメソッドが必要であり、必要に応じて 1つ以上のインターフェースを実装する必要があります。
直接リンクを持たないコンポーネント間でデータを送信する場合は、共有サービスを使用する必要があります。データを常に sync する必要がある場合は、RxJS の BehaviorSubject が便利です。
名前は、BehaviorSubject を使用する the.next() メソッドを使用して変更できるオブザーバブルとして設定できます。次に、getValue() 関数を使用して、最後の値を生データとして抽出できます。
現在の値は BehaviorSubject に保存されます。その結果、コンポーネントは常に BehaviorSubject の最新のデータ値を読み取ります。
以下の例を参照してください。
TypeScript コード（first.component.ts）：
import { Component, OnInit } from '@angular/core';
import { SharedService } from '../demo.service';
@Component({
selector: 'app-demo1',
templateUrl: './first.component.html',
styleUrls: ['./first.component.css']
})
export class FirstComponent implements OnInit {
sharedData: string;
data: any;
constructor(private sharedService: SharedService) { }
ngOnInit() {
this.sharedService.sharedData$
.subscribe(sharedData => this.sharedData = sharedData);
}
updateData() {
this.sharedService.setData(this.data);
}
}
TypeScript コード（second.component.ts）：
import { Component, OnInit } from '@angular/core';
import { SharedService } from '../demo.service';
@Component({
selector: 'app-demo',
templateUrl: './second.component.html',
styleUrls: ['./second.component.css']
})
export class SecondComponent implements OnInit {
sharedData: string;
data: any;
constructor(private sharedService: SharedService) { }
ngOnInit() {
this.sharedService.sharedData$
.subscribe(sharedData => this.sharedData = sharedData);
}
updateData() {
this.sharedService.setData(this.data);
}
}
HTML コード：
<h3>2nd Component</h3>
<input type="text" [(ngModel)]="data">
<button (click)="updateData()">Save</button>
<br>
<br>
Saved Data {{ sharedData }}
<h1>Example of Unrelated Components: Sharing Data with a Service</h1>
<h3>1st Component</h3>
<input type="text" [(ngModel)]="data">
<button (click)="updateData()">Save</button>
<br>
<br>
SavedData {{ sharedData }}
コンポーネント間でデータを渡すことの利点は、プロジェクトを小さな部分に分割することでプロジェクトをよりよく理解できることです。これにより、何百ものコード行に煩わされることなく集中できます。
各開発者が別々のコンポーネントで作業する場合、チームはより生産的に運用することもできます。
上記の例のライブデモンストレーションを確認するには、ここをクリックしてください。
Muhammad Adil is a seasoned programmer and writer who has experience in various fields. He has been programming for over 5 years and have always loved the thrill of solving complex problems. He has skilled in PHP, Python, C++, Java, JavaScript, Ruby on Rails, AngularJS, ReactJS, HTML5 and CSS3. He enjoys putting his experience and knowledge into words.
Facebook