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

Posted 2023-03-17

【中文标题】Angular 2 observables：防止组件的变化冒泡

【英文标题】：Angular 2 observables: prevent changes in component bubbling up

【发布时间】：2017-02-14 21:43:55

【问题描述】：

在我的应用中，我有一个从 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;
    );

【参考方案1】：

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

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

另见typescript - cloning object

【讨论】：

知道了。所以真的，这些年来变化不大：P 我知道 javascript 多年来一直以这种方式工作（通过引用传递对象），但我认为 observables 会有所不同，出于某种原因。

Observables 只是用 TypeScript 编写的类和方法/函数，它们被转译为 JS。不，什么都没有改变：D

Observable 是为了解决另一个问题而创建的。你要找的可能是这样的：facebook.github.io/immutable-js