Angularコンポーネント間で値を渡す方法

2年 ago
海斗, 葵
2 minutes

Angularでは、コンポーネント間で値を渡す方法はいくつかあります。

  1. @Input、@Outputデコレータ経由：親コンポーネントに@Inputデコレータを使ってデータを子コンポーネントへ、子コンポーネントに@OutputデコレータとEventEmitterを使ってデータを親コンポーネントへ渡す

親コンポーネントでデータを渡す例：

// 父组件中
import { Component } from '@angular/core';
@Component({
selector: 'app-parent',
template: `
<app-child [data]="parentData" (dataEvent)="receiveData($event)"></app-child>
`
})
export class ParentComponent {
parentData: string = 'Hello World';
receiveData(data: string) {
console.log(data);
}
}

子コンポーネントでのデータ受け取りの例:

// 子组件中
import { Component, Input, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'app-child',
template: `
<p>{{ data }}</p>
<button (click)="sendData()">Send Data</button>
`
})
export class ChildComponent {
@Input() data: string;
@Output() dataEvent: EventEmitter<string> = new EventEmitter<string>();
sendData() {
this.dataEvent.emit('Data from child component');
}
}
  1. サービス（Service）を使用して、複数のコンポーネント間でデータを共有できる共有サービスを作成する。

サービスを共有する

// 服务中
import { Injectable } from '@angular/core';
@Injectable()
export class DataService {
private data: string = '';
setData(data: string) {
this.data = data;
}
getData() {
return this.data;
}
}

コンポーネントでサービスを使用する：

// 组件中
import { Component } from '@angular/core';
import { DataService } from './data.service';
@Component({
selector: 'app-parent',
template: `
<p>{{ data }}</p>
<button (click)="setData()">Set Data</button>
`,
providers: [DataService]
})
export class ParentComponent {
data: string = '';
constructor(private dataService: DataService) {}
setData() {
this.dataService.setData('Data from parent component');
}
ngOnInit() {
this.data = this.dataService.getData();
}
}
  1. ルーティングパラメータを利用する: ルーティングパラメータ経由でデータがターゲットコンポーネントに引き渡される。

ルーティングパラメータをルーティング設定で定義します：

// 路由模块中
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ChildComponent } from './child.component';
const routes: Routes = [
{ path: 'child/:data', component: ChildComponent }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }

対象コンポーネントでルートパラメーターを取得する：

// 目标组件中
import { Component } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-child',
template: `
<p>{{ data }}</p>
`
})
export class ChildComponent {
data: string = '';
constructor(private route: ActivatedRoute) {}
ngOnInit() {
this.route.params.subscribe(params => {
this.data = params['data'];
});
}
}

上記のメソッドを通じて、Angular でコンポーネント間での値のやり取りを実現できます。

bannerAds