兄弟组件及任意组件间传值

最经典的是父子之间的传值：
官网推荐方式：
父组件html：

<div class="content">
  <div class="left">
<!--    这里的这/ 不能少-->
    <a [routerLink]="['/home/welcomeHome']">欢迎首页</a>
    <br><br>
    <a [routerLink]="['/home/systemSetting']">系统设置</a>
  </div>
  <div class="right">
    右侧
   <!--  [data]="data" 父组件传给子组件  (reciveData)="resData($event)" 父组件接受子组件  -->
    <app-input-file [data]="data" (reciveData)="resData($event)"></app-input-file>
    <!--    讲子组件嵌套在右侧-->
    <router-outlet></router-outlet>
  </div>
</div>

ts:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  // 需要发送数据
  data = '123';
  constructor() { }

  ngOnInit(): void {
  }
  // 接受子组件的数据
  resData(data: any) {
    this.data = data;
  }
}

子组件html:

<div>
  <input #fileInput type="file" style="display: none" (change)="selectFile($event)"/>
  <span>{{fileName}}</span>
  <span (click)="fileInput.click()">上传文件</span>
</div>

ts：

import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';

@Component({
  selector: 'app-input-file',
  templateUrl: './input-file.component.html',
  styleUrls: ['./input-file.component.css']
})
export class InputFileComponent implements OnInit {

  public fileName: any;
  // 接收数据
  @Input() data;
  // 发送数据
  @Output() resData = new EventEmitter();
  constructor() { }

  ngOnInit(): void {
  }
  selectFile(evvnt: any): void {
    this.fileName = evvnt.target.value.files[0].name;
    // 真正的发送
    this.resData.emit(this.fileName);
  }
}

接下就讲讲兄弟组件以及任意组件之间的交互：
方式有两种：1、subject利用service实现的发布/订阅模式；2、利用缓存实现（缺点很明显，两边需要有方法去set/get）。
先创建一个service:

G:\angularStu\myAngular>ng g service service/sendAndSubscribe

service文件：

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

@Injectable({
  providedIn: 'root'
})
export class SendAndSubscribeService {

  // 订阅/发布模式 需要import {Subject} from 'rxjs';
  public send: Subject<any> = new Subject();

  constructor() {
  }
  // 当然还有移除清空。只是为了说明问题，放这里，也不会说明
  setLocalStorage(key: string, value: any, exp: any): void {
    localStorage.set('key', 'value', exp + 1000);
  }
  getLocalStorage(key: string): void {
    localStorage.get('key');
  }
  // session设置：严格来说session是服务端的设置
  // sessionStorage.removeItem('key'); 从sessionStorage删除保存的数据
  // sessionStorage.clear();  从sessionStorage删除所有保存的数据
  setSessionStorage(key: string, value: any): void {
    sessionStorage.setItem('key', 'value');
  }
  // 获取session
  getSessionStorage(key: string): void {
    sessionStorage.getItem('key');
  }

  // Cokie缓存实现
  setCokie(name: string, value: any, day: any): void {
    // 当设置的时间等于0时，不设置expires属性，cookie在浏览器关闭后删除
    if (day !== 0) {
      const expires = day * 24 * 60 * 60 * 1000;
      const date = new Date(+new Date() + expires);
      document.cookie = name + '=' + escape(value) + ';expires=' + date.toUTCString();
    } else {
      document.cookie = name + '=' + escape(value);
    }
  }

  getCookie(name: string) {
    const reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)');
    if (document.cookie.match(reg)) {
      const arr = document.cookie.match(reg);
      return unescape(arr[2]);
    } else {
      return null;
    }
  }
}

组件实现交互方式：
第二种方式，缺点虽然很明显，不是自动订阅，需要方法的获取。但是他可以做到同一个域中数据任意传输。比如iframe两个不同语言的界面。