时间戳

首页 > 解决方案 > 角度组件未收到可观察的

angular - 角度组件未收到可观察的

问题描述

我有一个 Angular 7 应用程序，它有多个路由组件：问题、答案。这些组件不相关，因为它们分别出现在不同的路线下。我可以使用他们的路线路径导航到两者，所以我知道这是有效的。

我已经设置了一个数据服务来在整个应用程序中共享一个用户（在这个阶段只是一个名称）。

data.service.ts

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

@Injectable()
export class DataService {
  private user = new BehaviorSubject<string>('John');
  cast = this.user.asObservable();

  constructor() { }

  editUser(newUser: string) {
    this.user.next(newUser);
  }
}

现在在每个组件中我已经导入并订阅了这个服务：

this.data.cast.subscribe(user => this.user = user);

现在在问题组件（questions.component.ts）中，我有一个更改用户字符串值的方法：

editedTheUser() {
  this.data.editUser(this.editUser);
}

在每个 HTML 组件中，我都有 {{ user }}

现在，当我通过单击按钮和 questions.component.ts 中的表单值触发该方法时，该值会更新，但仅在问题 HTML 中。

<input type="text" [(ngModel)]="editUser">
<button (click)="editedTheUser()">Change</button>

这个想法是让两个路由在浏览器中打开（可能是多个浏览器，即 Chrome 和 Firefox），但仍然在同一个网络上，并在两者中自动更新 {{ user }} 值。

最终结果基本上是将所有问题都放在平板电脑上，并将答案显示在屏幕上。如果可能的话，我宁愿不使用套接字，因为它只会在本地环境中运行。

谢谢

标签： angular

解决方案

Observables 不是这样工作的。

您保存在 BehaviourSubject 中的内容仅在您的应用程序的该实例中可用。您应用程序的每个新页面都是一个新实例。

要执行您想要的操作，您必须将数据保存到数据库中，并且您可以使用 websockets 实时更新所有客户端中的数据。

这样，您将数据发送到后端，后端保存它并将更新发送到 websocket 上的所有活动客户端。

您可以使用 feathersjs 或其他框架。如果您愿意，很容易开始使用它。您也可以使用Firestore，它既简单又免费（对于您正在尝试的小东西）。

推荐阅读