与重复组件共享数据服务

Question

我有一个重复的组件，它使用共享服务并使用主题行为。

这是我的组件

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)
  }
}

父组件

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

这是stackblitz Demo

我希望当我对组件 1 进行更改时，复制的组件也会得到此更改。 （当我点击保存时，我会在两个组件上触发save() 函数see here）

实际上，当我更改第一个组件中的输入时，它只会在此组件中打印，而不是在副本中。

组件是否使用了共享 data.service 的不同实例？如果是，如何使它们使用相同的？

Answer 1

您需要在消费 HelloComponent 中订阅您的数据服务的 observable。

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