angular - 在 Angular 中跨组件共享输入字段值

Question

我正在试验 Angular 8。我在两个不同的组件中有两种表单，它们共享一些输入值，并且每次用户离开输入字段时它们都会更新。

组件 1 有这些输入字段

<input matInput [(ngModel)]="first" (blur)="newMessage()">
<input matInput [(ngModel)]="last" (blur)="newMessage()" >

组件 2 有这些输入字段

<input matInput [(ngModel)]="first2" >
<input matInput [(ngModel)]="last2" >

为了分享这些值(value)观，我创建了一个如下所示的服务

export class DataService 
{

  private MessageSource = new BehaviorSubject<UserData[]>([]);

  currentMessage = this.MessageSource.asObservable();

  constructor( ) { }

  changeMessage(message : UserData[]){
        this.MessageSource.next(message)
  }

}

以及使用的 UserData 类

class UserData{
firstname : string
lastname : string
}

第一个组件具有与其关联的代码

export class Comp1Component implements OnInit {

  message : UserData[]
  first : string
  last : string

  constructor(private data: DataService) { }

  ngOnInit() {
    this.data.currentMessage.subscribe(message => this.first = message)
  }
name
  newMessage(){ 
    this.data.changeMessage(this.first)
  }
}

第二个看起来像这样

export class Comp2Component implements OnInit {

  message : UserData[]
  first2 : string
  last2: string

  constructor(private data: DataService) { }

  ngOnInit() {
    this.data.currentMessage.subscribe(message => this.first2 = message)
  }
}

现在，此代码更新第二个组件上的第一个输入字段。我也想传递第二个输入值，但我不知道我必须做什么...有什么想法吗？

这里是示例 https://stackblitz.com/edit/angular-e5k2vm

如果有人能提供帮助，我将不胜感激......

Answer 1

尝试这样:

<强> Working Demo

数据服务

  private MessageSource = new BehaviorSubject<UserData>({});

  currentMessage = this.MessageSource.asObservable();

  constructor( )    { }

  changeMessage(message : UserData){
        this.MessageSource.next(message)
  }

.comp1

 ngOnInit() {
    this.data.currentMessage.subscribe(message => {
      this.first = message.first;
      this.last = message.last;
    });
  }
  name;
  newMessage() {
    this.data.changeMessage({ first: this.first, last: this.last });
  }

.comp2

 ngOnInit() {
    this.data.currentMessage.subscribe(message => {
      this.first2 = message.first;
      this.last2 = message.last;
    });
  }

  newMessage() {
    this.data.changeMessage({first:this.first2,last:this.last2});
  }