angular - Angular 6 RxJs：尝试使 obj 可观察以用于其他组件

Question

服务

mode: Subject<any> = new Subject<any>();

constructor(public http: HttpClient) {
    this.setMode({ // defaults
        admin: this.admins.includes(localStorage.getItem("email")),
        edit: false,
        dev: false
    });
}

getMode() {
    return this.mode.asObservable();
}

setMode(value) {
    this.mode.next(value);
}

零件

constructor(private bcAuthService: BcAuthService) {}

ngOnInit() {
  this.bcAuthService.getMode().subscribe(mode => {
    console.log('mode: ', mode); // never logs or prints in the template
    this.mode = mode;
  });
}
editToggle(e) {
  this.mode.edit = e.target.checked; // err: cant edit `mode` because it never set.
  this.bcAuthService.mode.next(this.mode);
}

问题

我正在尝试设置一个可从许多组件读取和写入的 Observable。如上所示；我在我的服务中设置了 observable，但我的组件getMode()不起作用。任何想法为什么？

Answer 1

您的架构是正确的，但我认为您应该使用BehaivourSubject而不是Subject

尝试这个：

import { BehaviorSubject } from 'rxjs/BehaviorSubject';

服务

mode: BehaviorSubject<any> = new BehaviorSubject<any>(null);

    constructor(public http: HttpClient) {
        this.setMode({ // defaults
            admin: this.admins.includes(localStorage.getItem("email")),
            edit: false,
            dev: false
        });
    }

    getMode() {
        return this.mode.asObservable();
    }

    setMode(value) {
        this.mode.next(value);
    }

行为主体与主体

主题和行为主题有什么区别？

Answer 2

editToggle(e) {
this.mode.edit = e.target.checked; // err: cant edit `mode` because it 
// never set.
this.bcAuthService.setMode(e.target.checked);
}

我想这应该工作

我通过修改 fork Component Interaction做了类似的事情。