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进行更改时，重复的组件也会获得此更改。（当我单击“保存”时，将在两个组件see here上触发save()函数）

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

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

Answer 1

您需要在使用中的HelloComponent内部订阅可观察的数据服务。

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

与重复的组件共享数据服务

1 个答案: