Question

在我的应用中，我有一个UserService，它从API中提取用户对象。

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';

@Injectable()
export class UserService {
    constructor() {
        this.userSource.subscribe(user => console.log(user));
    }

    user:any = {
        name: 'Lindsey Buckingham'
    };
    private userSource = new BehaviorSubject<any>(this.user);
    user$ = this.userSource.asObservable();

    // fetch user data from HTTP and call 'next()' on observable
}

然后我有多个组件使用此服务。例如，个人资料页面：

import { Component } from '@angular/core';

import { UserService } from '../shared/user.service';

@Component({
    selector: 'profile',
    templateUrl: './profile.component.html'
})
export class ProfileComponent {
    constructor(private userService:UserService) {}

    private user:any = {};

    ngOnInit() {
        this.userService.user$.subscribe((user) => this.user = user);
    }
}

现在我遇到的问题是：如果在我的配置文件组件中编辑用户对象，则更改会立即传播到所有组件，因此所有组件都会立即收到更新的对象。我的印象是，通过订阅UserService的流，我会创建一个本地副本，如果我想更新组件中的用户对象，我会在UserService上使用一个调用this.user$.next()的方法和只有我的组件中的用户对象也会改变。但是，显然不是。

获得可观察物的悬念，但似乎我还没到那里。谁能向我解释我哪里出错？

更新

创建被观察对象的本地副本确实可以解决问题。

ngOnInit() { this.userService.user$.subscribe((user) => { let localUser = _.merge({}, user); this.user = localUser; }); }

Answer 1

observable只传递对象引用。如果修改此对象的属性，则对该同一对象实例具有引用的每个人都会看到此更改。仅使用原始值发送副本。它与函数调用相同，实际上正是observable所做的（如任何TypeScript或JS代码）

如果您不想使用副本，或者在发送活动之前更改发出值以创建副本的代码，则需要自己创建副本。

另见typescript - cloning object

Angular 2 observables：防止组件冒泡变化

1 个答案: