组件通讯

1、跨组件通讯

可以创建一个 共享的服务，组件可以注入该服务来存储和获取数据。

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';//用于组件之间共享数据,允许将值给多个订阅者
import { Observable } from 'rxjs';//组件之间可以进行事件的发布和订阅
@Injectable()
export class HttpserviceService {
  private massage = new Subject<any>()
  sendMassage(massage:any){
    this.massage.next(massage)//发送请求
  }
  getMessage(): Observable<any> {
    return this.massage.asObservable();
   }
}

 组件one：用于发送消息 

import { HttpserviceService } from "../httpservice.service";
@Component({
  selector: 'app-one',
  templateUrl: './one.component.html',
})
export class OneComponent implements OnInit {
  constructor( 
    public HttpserviceService: HttpserviceService,

  ) { }
 ngOnInit() {}
  sendMessage(){
    console.log(this.message)
    this.HttpserviceService.sendMassage(this.message)
  }
}

<input type="text" pInputText  [(ngModel)]="message">
<button pButton (click)="sendMessage()">按钮</button>

组件two： 用于接收消息

import { HttpserviceService } from "../httpservice.service";
@Component({
  selector: 'app-two',
  templateUrl: './two.component.html',
})
export class TwoComponent implements OnInit {
   massage: any;
   constructor( 
    public HttpserviceService: HttpserviceService,
   ) { }
   ngOnInit() {
       this.HttpserviceService.getMessage().subscribe(massage=>{
            console.log(massage)
            this.massage = massage
       })
   }
}

2、通过广播(父组件发布广播,所有订阅了消息的子组件均可以接收到消息)的形式

import {Injectable, EventEmitter} from '@angular/core';
@Injectable()
export class PareChildServe{
  public sendData: EventEmitter<any> = new EventEmitter<any>();
}

//父组件

import { PareChildServe} from "../parechildserve.service";

this.PareChildServe.sendData.emit(a)

//子组件

this.PareChildServe.sendData.subscribe(data=>{
    console.log(data)
})

3、父子组件通讯

父传子

父组件在子组件上自定义属性，子组件通过@Input() 接收 父组件传的值

父组件：

<app-child [massage]='''name"></app-child>

子组件:

@Input() pubilc massage : any;

子传父：

父组件在子组件上自定义事件，子组件通过@Output() 绑定 通过EventEmitter事件发射器

父组件：

<app-child (massage)="name($event)"></ap-child>

name(e){

        console.log(e)

}

子组件：

@Output() massage : EventEmitter<any> = new EventEmitter();