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

Question

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

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() 和 只有这样我的组件中的用户对象也会改变。但是，显然不是。

掌握 observables 的窍门，但似乎我还没有完全掌握。谁能向我解释我哪里出错了？

更新：

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

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

Answer 1

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

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

另见typescript - cloning object