Question

我正在尝试从服务变量（isSidebarVisible）获取更新的值，该变量由另一个组件（header）通过点击事件（toggleSidebar）继续更新。

sidebar.service.ts

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject';

@Injectable() 
export class SidebarService {
    isSidebarVisible: boolean;

    sidebarVisibilityChange: Subject<boolean> = new Subject<boolean>();

    constructor()  {
        this.isSidebarVisible = false;
    }

    toggleSidebarVisibilty() {
        this.isSidebarVisible = !this.isSidebarVisible
        this.sidebarVisibilityChange.next(this.isSidebarVisible);
    }
}

sidebar.component.ts

export class SidebarComponent implements OnInit {
    asideVisible: boolean;
    _asideSubscription: any;

    constructor(private sidebarService: SidebarService) {
        this.asideVisible = sidebarService.isSidebarVisible
        this._asideSubscription = sidebarService.sidebarVisibilityChange.subscribe((value) => {
            this.asideVisible = value
        })
    }

    ngOnInit() {
    }
}

header.component.ts（更新服务变量的地方）

export class HeaderComponent implements OnInit {
    isSidebarVisible: boolean;
    _subscription: any;

    constructor(private sidebarService: SidebarService) {
        this._subscription = sidebarService.sidebarVisibilityChange.subscribe((value) => {
            this.isSidebarVisible = value
        })
    }

    toggleSidebar() {
        this.sidebarService.toggleSidebarVisibilty()
    }

    ngOnInit() {

    }
}

我可以在header.component.html时看到{{ isSidebarVisible }}中的服务变量值更改，但在sidebar.component.html中，它始终打印默认值并且从不收听更改。

请帮我解决这个问题。

Answer 1

将订阅移至服务，两个组件都可以访问此值。如果您只需要一次值，则可以直接使用它（就像我在 sidebar.component 中所做的那样）;如果您需要使用此值更新某些内容，则可以使用getter（ header.component 中的示例）。

sidebar.service.ts：

@Injectable() 
export class SidebarService {
    isSidebarVisible: boolean;

    sidebarVisibilityChange: Subject<boolean> = new Subject<boolean>();

    constructor()  {
        this.sidebarVisibilityChange.subscribe((value) => {
            this.isSidebarVisible = value
        });
    }

    toggleSidebarVisibility() {
        this.sidebarVisibilityChange.next(!this.isSidebarVisible);
    }
}

sidebar.component.ts

export class SidebarComponent {
    asideVisible: boolean;

    constructor(private sidebarService: SidebarService) {
        this.asideVisible = sidebarService.isSidebarVisible;
    }
}

header.component.ts

export class HeaderComponent {
    constructor(private sidebarService: SidebarService) { }

    get isSidebarVisible(): boolean {
        return this.sidebarService.isSidebarVisible;
    }

    toggleSidebar() {
        this.sidebarService.toggleSidebarVisibility()
    }
}

您也可以在两个/两个组件中订阅主题并在那里获取值：

this.sidebarService.sidebarVisibilityChange.subscribe(value => {...});

如果您想了解有关主题的更多信息，请查看here。

Answer 2

@isherwood让我走上正轨，谢谢！这是最像我的情况的问题和答案。

以我为例，我有一个应用范围的 userService ，用于监听AngularFireAuth（ authState ）中的更改，当有效用户存在时，它会设置一个监听器来该用户的AngularFirestore文档，其中包含用户的信息，例如姓名，电子邮件，颜色等（ / appusers / $ {user.id} ）。所有来自userService的页面都需要实时获取这些数据，因为它是一个监听器（.subscribe（））

我的问题是页面在继续做更多数据库工作之前依赖于准备好用户文档（登录并获取用户文档）。通过深层链接直接导航到内部页面时，该页面会在用户文档准备就绪之前尝试执行数据库操作，从而导致错误/崩溃。

按照上面的@isherwoods指示，这是确保应用程序的页面等待用户数据准备好之后再尝试使用其进行其他数据库操作的方式：

user.service.ts

export class UserService {

userDocumentReady: boolean = false; // initial value is "userdoc is not ready"
userDocObserver: Subject<boolean> = new Subject<boolean>(); // observing that bool

constructor(
  public fireauth: AngularFireAuth,
  public afs: AngularFirestore,
) {

// watch variable
this.userDocObserver.subscribe(value => this.userDocumentReady = value);

this.fireauth.authState
  .subscribe(user => {
    if (user) {

      this.afs.doc(`/tooluser/${user.uid}`).snapshotChanges()
      .subscribe(usr => {
        if (usr.payload.data()) {
          console.log(`got user object from database:`, usr.payload.data());              
          this.currentUser = usr.payload.data();

          this.userDocObserver.next(true); // flip UserDocumentReady flag

mytools.page.ts

// this is a logged-in page of the app,
// accessible through deep link https://my.app.domain/mytools

export class UsersPage implements OnInit {

constructor(
  public userService: UserService,
) { }

ngOnInit() {
  if (this.userService.userDocumentReady) {
    console.log(`users: userdoc already here, no need to wait`);
    this.setupPageData();
    return;
  }

  // wait for userdoc before setting up page
  this.userService.userDocObserver.subscribe(docReady => {
    if (docReady){
      console.log(`mytools: user ready value ${docReady}. now setup page.`);
      this.setupPageData(); // this function does the database stuff that depends on the user data to be ready first
    }
  });
}

此“工作形式”现在和行为似乎是一致的。开发时也非常方便，因为在浏览器栏中键入URL会导致这种直接导航。写下来记住它-谁知道它是否对其他人有用？

这只是我的第二个离子应用程序，因此，如果我的结构/设置出现严重错误，我会对对此解决方案的评论非常感兴趣：）

编辑：在mytools.page.ts中添加了检查功能，这样我们就不会（永远）等待一个新的用户文档（如果已有的话）

从其他组件更新时，如何检测服务变量？

2 个答案:

sidebar.service.ts：

sidebar.component.ts

header.component.ts

user.service.ts

mytools.page.ts