将对象检测从一个组件改为另一个组件

Question

嗨，我有一个对象，它正在使用一个组件中的可观察到的东西从api更新，我想捕获同一对象对另一个组件的更改。这两个组件都是两个选项卡。最初是根据路由更新数据。以下是正在更新的数据：

@Component({
    template : `<div><input type='text' [(ngModel)]='data.name' /></div>`
})
export class ComponentOne{

    data : any;
    constructor(private dataService : DataService,
        private route : ActivatedRoute,private events : Events){
        this.data = this.route.snapshot.data['data'];
    }
    updateData(){
        this.dataService.update(this.data).subscribe(result => {
            this.data = result;
            this.events.publish('data',this.data);
        })
    }
}

我在这里捕获数据：

@Component({
    template : `<div>{{data.name}}</div>`
})
export class ComponentTwo{
    data : any;
    constructor(private dataService : DataService,
        private route : ActivatedRoute,private events : Events){
        this.data = this.route.snapshot.data['data'];
    }

    ngViewDidEnter(){
        //why updated data not coming from server
        this.data = this.route.snapshot.data['data'];
        this.events.subscribe('data',(data) => {
            this.data = data;
        })
    }
}

在componentTwo中，数据最初是从路由获取的。考虑到上述情况，我有两个问题：

1. 如果应用程序有多个组件，我想我必须在每个组件中subscribe事件，这将是一个很好的做法。请提出任何替代方法？
2. 由于数据来自服务器，为什么不从ComponentTwo中的This.Route.Snapshot.data['data']获取更新的数据？

Answer 1

由于它们在任何方面都不相关，因此您应该使用共享服务。

首先创建一个服务，并向其添加主题

export class SharingService {
  data: Subject<any> = new Subject();
}

在第一个组件中，您将更新数据并将其传递给主题

updateData(){
    this.dataService.update(this.data).subscribe(result => {
        this.data = result;
        this.sharingService.data.next(data);
        this.events.publish('data',this.data);
    })
}

在第二个服务中,您现在可以订阅更改事件：

constructor(
    private dataService : DataService,
    private route : ActivatedRoute,
    private events : Events,
    private sharingService: SharingService
){
    sharingService.subscribe(data => this.data = data);
}

并不是说必须实例化两个选项卡才能使其工作。如果不是，则必须使用BehaviorSubject:

data: BehaviorSubject<any> = new BehaviorSubject(undefined);