如何通过角度行为主体传递多个（2个或多个）变量

Question

我是 rxjs 新手。在我的应用程序中，我遇到了一种将用户名和密码值从一个组件传递到另一个组件的情况（以角度方式）。请您帮助我通过行为主题将这些变量从一个组件传递到另一个组件，并提供一个简洁的基本示例。我有一个类存储用户详细信息 UserInformation.ts 如下

export class UserInformation {
    username: string;
    constructor() {
    }
}

我有一个服务如下。用户信息.service.ts

import { Injectable } from '@angular/core';
import { UserInformation } from '../UserInformation';
@Injectable()
export class UserInformationService {
  userData:UserInformation;
  variable:string='ServiceVariable';
  constructor() {
    this.userData = new UserInformation(); 
   }
  getUserData()
  {
    return this.userData;
  }
  setUserData(userData:UserInformation)
  {
    this.userData.username=userData.username;
    console.log(this.userData.officeLocation);
  }
}

在我的 FirstComponent.ts 中，我有以下代码。这个 getVALuesFromForm 方法用于从表单中获取用户名。

getValuesFromForm()
   {
     this.enteredUser.username = this.loginform.get('Username').value;
     console.log(this.enteredUser.username);
     this.service.setUserData(this.enteredUser);     
   }

在我的 secondaryComponent.ts 中，我有以下代码。

import { Component, OnInit , Input , Output  } from '@angular/core';
import { UserInformation } from '../UserInformation';
import  { UserInformationService }   from '../services/user-information.service';
import { Injectable } from '@angular/core';
@Component({
  selector: 'app-nav-bar-component',
  templateUrl: './nav-bar-component.component.html',
  styleUrls: ['./nav-bar-component.component.css'],
  providers:[UserInformationService]
})
@Injectable()
export class NavBarComponentComponent implements OnInit {
   userInfo:UserInformation;    
  constructor(public service:UserInformationService) {
    this.userInfo=service.getUserData();
    console.log(service.userData.username);
    console.log(this.userInfo.username);
   }
  ngOnInit() {
  }
}

现在我的问题是我们如何借助 Rxjs 中的行为主体将这些变量从第一个组件传递到第二个组件

Answer 1

有一个具有如下属性的接口，

export interface School {
    teacher: Teacher;
    student?: Student;
}

private emitter = new Subject<School>();

this.emitter.next({ student: ramStudent, teacher: Anieteacher});