Angular8 Subject 同级组件通讯

Angular8 Subject 同级组件通讯

1.文件结构

2.数据结构

models/student-info.model.ts

export class StudentInfo {
    public name: string;
    public chinese: string;
    public maths: string;
    public english: string;
    constructor() {
        this.name = '';
        this.chinese = '';
        this.maths = '';
        this.english = '';
    }
}

3.服务

services/student-info.service.ts

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';
import { StudentInfo } from '../models/student-info.model';

@Injectable({
  providedIn: 'root'
})
export class StudentInfoService {
  studentInfo_$: Subject<StudentInfo> = new Subject<StudentInfo>();

  constructor() { }
  setStudentInfo(newStudentInfo: StudentInfo) {
    console.log(newStudentInfo);
    this.studentInfo_$.next(newStudentInfo);
  }
  getStudentInfo(newStudentInfo: StudentInfo) {
    this.studentInfo_$.next(newStudentInfo);
  }

}

4.组件获取值

app.component.html

<app-brother-one></app-brother-one>
<app-brother-two></app-brother-two>

brother-one.component.html

<h1>brother-one works!</h1>
<p>显示功能</p>
<p>姓名name：{{studentInfos.name}}</p>
<p>语文chinese：{{studentInfos.chinese}}</p>
<p>数学maths：{{studentInfos.maths}}</p>
<p>英语english：{{studentInfos.english}}</p>

brother-one.component.ts

import { Component, OnInit } from '@angular/core';
import { StudentInfo } from 'src/app/models/student-info.model';
import { StudentInfoService } from 'src/app/services/student-info.service';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

@Component({
  selector: 'app-brother-one',
  templateUrl: './brother-one.component.html',
  styleUrls: ['./brother-one.component.css']
})
export class BrotherOneComponent implements OnInit {
  public studentInfos = new StudentInfo();
  public _destroyed$ = new Subject();
  constructor(private studentInfoService:StudentInfoService,) { }

  ngOnInit(): void {
    // 初始化就要广播
    this.getLastedValue();
  }
  //获取最新的值
  getLastedValue() {
    this.studentInfoService.studentInfo_$.pipe(takeUntil(this._destroyed$)).subscribe(data => {
      this.studentInfos = data;
      console.log(this.studentInfos);
    });
  }
  ngOnDestory() {
    this._destroyed$.next();
    this._destroyed$.complete();
  }

}

brother-two.component.html

<h1>brother-two works!</h1>
<p>修改功能</p>
<form [formGroup]="studentForm">
    姓名name：<input type="text" formControlName="name"/><br>
    语文chinese：<input type="text" formControlName="chinese"/><br>
    数学maths：<input type="text" formControlName="maths"/><br>
    英语english：<input type="text" formControlName="english"/><br>
    <button (click)="updateValue()">应用修改</button>
</form>

brother-two.component.ts

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { StudentInfo } from 'src/app/models/student-info.model';
import { StudentInfoService } from 'src/app/services/student-info.service';

@Component({
  selector: 'app-brother-two',
  templateUrl: './brother-two.component.html',
  styleUrls: ['./brother-two.component.css']
})
export class BrotherTwoComponent implements OnInit {
  public studentForm:FormGroup;
  public studentInfo = new StudentInfo();
  constructor(private fb: FormBuilder,
    private studentInfoService: StudentInfoService) { }

  ngOnInit(): void {
    this.studentForm = this.createFrom();
    console.log(this.studentForm);
  }
  createFrom() {
    return this.fb.group({
      name:[''],
      chinese: [''],
      maths:[''],
      english:['']
    });
  }
  updateValue() {
    console.log(this.studentForm);
    this.studentInfo = this.studentForm.value;
    this.studentInfoService.setStudentInfo(this.studentInfo);
    console.log(this.studentInfo);
  }
 
}

5.效果