Javascript 与复制组件共享数据服务

我有一个复制组件，它使用共享服务和主体行为

这是我的部件

export class HelloComponent  {
   message:string;
   printedMessage:string

  constructor(private data: DataService, private router : Router) { }

  ngOnInit() {
    this.message = this.data.messageSource.value;
  }

  updateService(){
    this.data.changeMessage(this.message);
    this.printedMessage=this.data.messageSource.value
    //this.data.currentMessage.subscribe(message => this.message = message)
  }

  navigateToSibling(){
    this.router.navigate(['/sibling']);
  }
}

数据服务

export class DataService {

  messageSource = new BehaviorSubject<string>("default message");
  constructor() { }

  changeMessage(message: string) {
    this.messageSource.next(message)
  }
}

导出类数据服务{
messageSource=新行为主体（“默认消息”）；
构造函数（）{}
changeMessage（消息：字符串）{
this.messageSource.next（消息）
}
}

父组件

<hello></hello>
<hello></hello>

这里有一个

我希望当我对组件1进行更改时，复制的组件也会得到此更改。（当我单击save时，我触发两个组件上的

save（）

函数。）

实际上，当我更改第一个组件中的输入时，它只在这个组件中打印，而不是在复制的组件中打印

---

组件是否正在使用shared data.service的差异实例？如果是，如何使它们使用相同的功能？

您需要订阅数据服务在消费Hello组件中的可观察功能

ngOnInit() {
    this.message = this.data.messageSource.value;
    this.data.messageSource.subscribe(message => this.printedMessage = message); // Subscribing to changes here
}

---

您的解决方案正在运行，我希望在单击first@HamzaHaddad那么，你做错了。。。你真的应该利用可观察到的东西。将

BehaviorSubject

分配给message并使用

{{message | async}

。对于其他值，使用类似的方法。您可以直接在模板中添加：

{{data？.messageSource | async}