私のアプリでは、APIからユーザーオブジェクトを取得するUserServiceがあります。角度2の観測値:コンポーネントのバブリングアップの変化を防ぐ
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;
});
}
これが表示されます。 JavaScriptは何年もこのように機能しています(オブジェクトを参照渡し)。しかし、私は何らかの理由でobservablesが違うと思っていました。 –
オブザーバブルは、TypeScriptで書かれたクラスとメソッド/関数であり、JSに渡されます。そして、何も変わっていません:D –
別の問題を解決するために 'Observable'が作成されました。あなたが探しているものはこれかもしれません:https://facebook.github.io/immutable-js/ –