序章

この投稿では、Angularのコンポーネント間でデータを渡すための3つの方法と、シナリオに応じて最適なアプローチについて学習します。

1. URLからのデータの受け渡し

前のページが破棄されて別のページに移動しているページから別のページに移動していると考えてください。 渡すデータが多くない場合(オブジェクトのIDなど)、URLを使用してデータを渡すことができます。

AngularのURLを介してデータを渡すには2つの方法があります。

  • ルーターパラメータ
  • クエリパラメータ

パラメータがコンポーネントに必須である場合は、ルータパラメータを使用する必要があります。 それ以外の場合は、 queryparamsを使用できます。

ルーターパラメータの使用

ルーターパラメータは必須パラメータです。 次のように、ルーターモジュールのURLにパラメーターを登録する必要があります。

app-router.module.ts
const routes: Routes = [
  { path: 'list/:id', component: AppListComponent }
];

この例では、listはルートURLであり、:idは渡す必要のあるルーターパラメーターであり、AppListComponentはそのルートにマウントするコンポーネントです。

<button
  type="button" 
  [routerLink]="['/list', id]"
>
  Show List
</button>

この例では、idはそのコンポーネントのコードで初期化された変数であり、/listはナビゲートするルートです。

routeサービスを介したルーターパラメータの通過

app.component.ts
id = 28;

constructor (private router: Router) {}

route() {
  this.router.navigate(['/list', this.id]);
}

ルーターパラメータの読み取り

ルーティング先のコンポーネントからルーターパラメータを読み取る方法は次のとおりです。

app-list.component.ts
constructor(
  private activatedroute: ActivatedRoute
) {
  this.activatedroute.params.subscribe(data => {
    console.log(data);
  })
}

クエリパラメータの使用

クエリパラメータはオプションのパラメータです。 クエリパラメータに個別のURLを登録する必要はありません。

app-router.module.ts
const routes: Routes = [
  { path: 'list', component: AppListComponent }
];

この例では、listがルートURLであり、AppListComponentがコンポーネントです。

<button
  type="button"
  [routerLink]="['/list']"
  [queryParams]="{id: '24'}"
>
  Show List
</button>

この例では、idがキーで、24が静的な値です。 変数を介して動的な値を渡すこともできます。

routeサービスを介したクエリパラメータの受け渡し

app.component.ts
id = 28;

constructor (private router: Router) {}

route() {
  this.router.navigate(['/list'], {queryParams: {id: this.id}});
}

クエリパラメータの読み取り

app-list.component.ts
constructor(
  private activatedroute: ActivatedRoute
) {
  this.activatedroute.queryParams.subscribe(data => {
    console.log(data);
  })
}

注:この記事角度ルーターパラメーターの詳細を入手してください。

2. @Inputおよび@Outputを介したデータの受け渡し

子から親に、または親から子コンポーネントにデータを渡したい場合は、@Inputおよび@Outputを使用できます。

app-parent.component.html
<app-child
  [jsonData]="data"
  (outputData)="data = $event"
></app-child>

ここで、dataは、コンポーネントのコードで初期化された変数です。

app-child.component.ts
import { Component, Input, OnInit } from '@angular/core';

@Component({
  selector: 'app-child',
  template: ''
})
export class AppChild implements OnInit {
  @Input() 
  jsonData;
  @Output()
  outputData = new EventEmitter();
  constructor() {}

  ngOnInit() {
    console.log(this.jsonData);
  }

  emitData(data) {
    this.outputData(data);
  }
}

このようにして、子から親へ、および親から子へデータを渡すことができます。

注;この記事@Input()およびこの記事 @Output()の詳細を入手してください。

3. Observablesを使用してサービスを介してデータを渡す

2つのコンポーネントが兄弟である場合、または階層内のコンポーネントのレベルがより離れている場合は、オブザーバブルを使用してデータを渡すためのサービスを使用することをお勧めします。

この例では、 RxJSサブジェクトを使用して、オブザーバブルを作成します。

app.service.ts
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';

@Injectable({providedIn: 'root'})
export class AppService {
  observer = new Subject();
  public subscriber$ = this.observer.asObservable();

  emitData(data) {
    this.observer.next(data);
  }
}

データを送信するには、このサービスのemitDataメソッドを呼び出すことができます。データを取得するには、次のようにsubsciber$にサブスクライブする必要があります。

constructor(private appService: AppService) {}

ngOnInit() {
  this.appService.subscriber$.subscribe(data => {
    console.log(data);
  });
}

結論

今のところ、Angularのコンポーネント間でデータをやり取りする3つの方法は以上です。 次に、いくつかの素晴らしいコンポーネントを構築してください!