angular中组件之间如何共享数据

Question

我使用 observable 将值从一个组件发送到另一个组件（数据在单击另一个组件后发送给订阅者，即通过主题）我订阅另一个组件并且一切正常，直到我刷新页面，刷新页面后组件被重新创建，重新创建后订阅者没有数据，因为他没有通过第一个组件 go。我该如何解决这个问题？

我尝试使用 rxjs 运算符作为 shareReplay 但它不像 shareReplay 那样工作

Answer 1

发生这种情况是因为一切都在 memory 中，并且由于 angular 应用程序正在重新初始化，页面刷新时所有内容都丢失了。 您需要保留 state，例如将其写入本地存储，为此您可以使用 rxjs 中的“tap”运算符。并且在加载时您可以从 localstorage end emit-it 读取数据，为此您可以使用 app_initializer 挂钩。

Answer 2

由于您的 Angular 应用程序在刷新页面时被销毁并重建，不幸的是您将丢失所有未保存在某处的用户 state。 这是构建 UI 时的常见问题，因此有许多工具可以解决这个问题

策略：

• 进行重要更改时存储您的用户 state。 这叫做持久化 state
• 在重新加载时获取并重新应用您保存的 state。 这个叫补水state

选项：

1. 坚持本地存储并在重新加载时检查本地存储值以补充
2. 坚持用户 URL（仅限简单值），例如以某种方式修改 URL，可以在重新加载时检查。 假设您正在处理单个页面， 查询参数或片段可能是 go 的方式
3. 通过POST/PATCH调用持久化到数据库，并在重新加载时执行 GET 请求以检查要补充的值

这些方法都没有内置到 RxJS 运算符中（据我所知），但我们可以轻松地利用 RxJS 来轻松实现上述任何策略。 tap运算符通常专门用于处理副作用，即应该作为 RxJS 发射的巧合发生的操作。 这正是我们在这里想要的，简单来说：

• “如果主题发出一个值，也会触发一个持续用户状态的操作”
• “在页面加载时，检查任何可用的已保存用户 state 并通过相关主题发出，从而补充组件将消耗的可观察值”

请参阅下面的示例实现

tab.service.ts

type TabType = 'first' | 'second'

@Injectable({
  providedIn: 'root'
})
export class TabService {
  tabSelectedSubject: BehaviorSubject<TabType> = new BehaviorSubject<TabType>('first')
  tabSelected$: Observable<TabType> =
    this.tabSelectedSubject
      .pipe(
        tap(tab: TabType) => {
          // ... your persist code here
          this.saveTab()
        },
        distinctUntilChanged()
      )

  constructor() {
    // ... your hydrate code here
    this.fetchAndApplyTab();
  }

  saveTab(): void {
    localStorage.setItem('tab', tab)
  }

  fetchAndApplyTab(): void {
    const savedTab: TabType | null = localStorage.getItem('tab');
    if (savedTab) {
      this.tabSelectedSubject.next(savedTab)
    }
  }
}

在这种情况下，我们正在利用我们的服务是这样的事实：

• 一个 singleton，所以每个应用程序只加载一次（即在应用程序根目录中提供）
• 该服务将在加载的第一个组件中实例化，该组件也会注入它

这允许我们将我们的fetchAndApplyTab()逻辑放在tab.service.ts的构造函数中并保持代码独立。 但是，根据您的用例，您可能希望自己从组件手动运行fetchAndApplyTab() 。

Answer 3

大多数情况下有 2 天时间在组件之间传递数据

1. 如果两个组件相互关联，则意味着父子关系，那么您可以使用输入输出装饰器传递数据。
2. 您可以使用公共服务在 2 个组件之间共享数据。

在 SPA 应用程序中，如果您刷新浏览器，那么 memory 中的所有对象和可观察对象都不存在，您需要再次 go 返回到它将被初始化的屏幕。