【Angular】親から子コンポーネントにイベントを通知しよう！【Subject】

<子コンポーネント [events]="Subject名.asObservable()"></子コンポーネント>

Subject名: Subject = new Subject();

クリックイベント用関数() {
this.Subject名.next();
}

// イベントを受け取る設定
@Input() events: Observable;
// イベントの購読設定
private Subscription名: Subscription;

ngOnInit() {
// イベントを購読
this.Subscription名 = this.events.subscribe(() =>
    // クリックされたタイミングでここが呼ばれるので、任意の処理を記述
);}

ngOnDestroy() {
// ページ遷移する際に購読を停止
this.Subscription名.unsubscribe();
}

<button (click)="onClick()">ボタン</button>

<app-child [events]="eventsSubject.asObservable()"> </app-child>

import { Component } from '@angular/core';
import { Subject } from 'rxjs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  eventsSubject: Subject = new Subject();

  onClick() {
    /**クリックイベントを通知 */
    this.eventsSubject.next();
  }
}

ng generate component child

import { Component, Input, OnInit } from '@angular/core';
import { Observable, Subscription } from 'rxjs';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.scss'],
})
export class ChildComponent implements OnInit {
  // イベントを受け取る設定
  @Input() events: Observable;
  // イベントの購読設定
  private eventsSubscription: Subscription;
  // ブラウザ表示コメント用
  message: String;

  ngOnInit() {
    // イベントを購読する
    this.eventsSubscription = this.events.subscribe(
      () =>
        // クリックされたタイミングでここが呼ばれるので、任意の処理を記述
        (this.message = 'ボタンがクリックされました')
    );
  }

  ngOnDestroy() {
    // ページ遷移する際に購読を停止
    this.eventsSubscription.unsubscribe();
  }
}

<section>
  <p>子コンポーネント</p>
  {{ message }}
</section>