【Anglar】Angla 6のコンポーネント通信

Angla 6_コンポーネント通信
本論文では、Anglar 6のコンポーネント通信を紹介します.
一、親子コンポーネント通信
1.1親コンポーネントからサブアセンブリに情報を伝達する
方法1親コンポーネントにサブアセンブリの属性を設定する
親コンポーネントバインディング情報

サブコンポーネント受信メッセージ

import { Component, OnInit, Input } from '@angular/core';
@Input childTitle: string;

メソッドの2つの親コンポーネントがサブアセンブリを呼び出す方法
親コンポーネントトリガメッセージ

子组件接收消息

childPrint() {
  alert("        ");
}

1.2サブコンポーネントが親コンポーネントに情報を伝達する
方法一はEventEmitterを使用します.
サブコンポーネントはEventEmitterを使用してメッセージを伝達する.

import { Component, OnInit, Output, EventEmitter } from '@angular/core';
...
@Output() initEmit = new EventEmitter();
ngOnInit() {
  this.initEmit.emit("        ");
}
...

親コンポーネント受信メッセージ

accept(msg:string) {
  alert(msg);
}

方法の2はView Childを使います.
サブコンポーネントは、伝達パラメータの関数を提供します.

sendInfo() {
  return 'Message from child 1.';
}

親コンポーネントはView Childを使用してトリガし、情報を受信する.

     1    
{{ info }}

import { Component, OnInit, ViewChild } from '@angular/core';
...
@ViewChild(ChildFirstComponent) private childcomponent: ChildFirstComponent;
getInfo() {
  this.info = this.childcomponent.sendInfo();
}

二、親子以外のコンポーネント通信
方法一service
短所:双方向のトリガが必要(情報送信／受信情報)
service.ts

import { Component, Injectable, EventEmitter } from "@angular/core";
@Injectable()
export class myService {
  public info: string = "";
  constructor() {}
}

コンポーネント1は、serviceに情報を伝達する.

import { myService } from '../../service/myService.service';
...
constructor(
  public service: myService
) { }

changeInfo() {
  this.service.info = this.service.info + "1234";
}
...

コンポーネント2は、serviceから情報を取得する.

import { myService } from '../../service/myService.service';
...
constructor(
  public service: myService
) { }

showInfo() {
  alert(this.service.info);
}
...

方法二BehaviorSubjectを使用する.
特典:本当に購読モードを発表します.データが変わったら、購読者も応えられます.
サービス

import { BehaviorSubject } from 'rxjs';
...
public messageSource = new BehaviorSubject('Start');
changemessage(message: string): void {
  this.messageSource.next(message);
}

コンポーネントがserviceを呼び出す方法で情報を伝達し、情報を受信する.

changeInfo() {
  this.communication.changemessage('Message from child 1.');
}
ngOnInit() {
  this.communication.messageSource.subscribe(Message => {
    window.alert(Message);
    this.info = Message;
  });
}

三、その他の通信方式

ルーティング値

クッキー、セッション、storge

参考文献
『Anglar 6.x学習ノート——コンポーネント詳細解のコンポーネント通信』
『angglar 6コンポーネント間のコミュニケーション方式』