角度2の観測値：コンポーネントのバブリングアップの変化を防ぐ

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からストリームを購読することによってローカルコピーを作成し、コンポーネント内のユーザーオブジェクトを更新したい場合は、this.user$.next()とを呼び出すUserServiceのメソッドを使用したいという印象を受けました私のコンポーネントのユーザーオブジェクトも同様に変更されます。しかし、明らかにそうではありません。

観測可能な観測点が得られるが、まだそれほど目に見えないようだ。私がどこに間違っているのか誰にでも説明できますか？

更新：

が実際に観測されたオブジェクトのローカルコピーを作成するには、トリックを行うありません。

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

Answer 1

観測可能なのは、オブジェクト参照を渡すだけです。このオブジェクトのプロパティを変更すると、この同じオブジェクトインスタンスへの参照を持つすべての人がこの変更を認識します。プリミティブ値のコピーのみが送信されます。関数呼び出しと同じですが、実際にはオブザーバブルが（TypeScriptやJSコードのように）正確に何であるか

コピーを作成したくない場合は、自分で作成する必要があります。イベントを送信する前に値を発行してコピーを作成します。

も参照してください。typescript - cloning object