Question

我有一个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}}值都自动更新。

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

谢谢

Answer 1

该服务只是Angular应用程序中该服务的同一实例，不可能在不同的浏览器中使其成为同一实例。您将需要一个服务器，其中编辑浏览器会将更新推送到服务器，然后所有其他浏览器都需要从服务器推送更新。套接字确实是此用例的正确解决方案。

Answer 2

可观察对象不是那样工作的。

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

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

通过这种方式将数据发送到后端，然后后端将其保存，并将更新发送到websocket上的所有活动客户端。

您可以使用feathersjs或其他框架。如果您愿意，它很容易上手。您也可以使用Firestore，它非常容易且免费（对于您尝试的东西来说很小。

角组件无法观察到

2 个答案: