Question

您好我有一个使用一个组件中的observable从api更新的对象，我想捕获同一个对象到另一个组件的更改。这两个组件都是两个选项卡。最初的数据是基于route更新的。这里是正在更新的数据：

@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数据中，最初是从路线获取的。考虑到上述情况，我有两个问题：

如果应用程序有多个组件，我想我必须这样做 subscribe每个组件中的事件，都会很好实践。请建议任何交替的方法？
为什么我没有从this.route.snapshot.data['data']获取更新的数据在ComponentTwo，因为数据来自服务器？

Answer 1

由于它们之间没有任何关联，因此您应该使用共享服务。

首先创建服务，然后向其添加Subject

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

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

1 个答案: