要实现Angular PWA和NGRX在离线情况下获取数据，您可以使用Service Worker来缓存数据，并在离线时从缓存中获取数据。以下是一个示例解决方案：

1. 首先，确保您的Angular应用程序已经设置为PWA。您可以通过运行以下命令来实现：

ng add @angular/pwa

这将安装必要的依赖项并将一些默认配置添加到您的Angular应用程序中。

2. 在您的应用程序中创建一个Service Worker来处理缓存逻辑。您可以使用Workbox库来简化Service Worker的创建和管理。首先，安装Workbox库：

npm install workbox-sw --save

3. 创建一个名为service-worker.js的文件，并在其中添加以下代码：

importScripts('https://storage.googleapis.com/workbox-cdn/releases/6.1.5/workbox-sw.js');

workbox.routing.registerRoute(
  new RegExp('.*'),
  new workbox.strategies.NetworkFirst()
);

workbox.routing.registerRoute(
  new RegExp('.*data\/.*\.json'),
  new workbox.strategies.CacheFirst()
);

上述代码将使用NetworkFirst策略来处理除了"data/"目录之外的所有请求，并使用CacheFirst策略来处理"data/"目录下的请求。这意味着在离线时，您的应用程序将尝试从缓存中获取"data/"目录下的数据。

4. 在Angular应用程序中注册Service Worker。在src/main.ts文件中添加以下代码：

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { environment } from './environments/environment';

if (environment.production) {
  if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/service-worker.js')
      .then(() => {
        console.log('Service Worker registered');
      })
      .catch(error => {
        console.error('Error registering Service Worker', error);
      });
  }
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

上述代码将在生产环境下注册Service Worker。

5. 在您的NGRX store中定义一个action，以便在离线时获取数据。例如，您可以创建一个名为LoadData的action，并在离线时从缓存中获取数据。在您的store文件中添加以下代码：

import { createAction, props } from '@ngrx/store';

export const loadData = createAction('[Data] Load Data');

export const loadDataSuccess = createAction(
  '[Data] Load Data Success',
  props<{ data: any }>()
);

export const loadDataFailure = createAction(
  '[Data] Load Data Failure',
  props<{ error: any }>()
);

6. 创建一个effect来处理LoadData action，并在离线时从缓存中获取数据。在您的effects文件中添加以下代码：

import { Injectable } from '@angular/core';
import { Actions, createEffect, ofType } from '@ngrx/effects';
import { of } from 'rxjs';
import { catchError, map, mergeMap } from 'rxjs/operators';
import { loadData, loadDataSuccess, loadDataFailure } from './data.actions';
import { DataService } from './data.service';

@Injectable()
export class DataEffects {
  loadData$ = createEffect(() =>
    this.actions$.pipe(
      ofType(loadData),
      mergeMap(() =>
        this.dataService.getData().pipe(
          map((data: any) => loadDataSuccess({ data })),
          catchError((error: any) => of(loadDataFailure({ error })))
        )
      )
    )
  );

  constructor(
    private actions$: Actions,
    private dataService: DataService
  ) {}
}

上述代码将在离线时从DataService获取数据，并在成功或失败时分别触发LoadDataSuccess和LoadDataFailure actions。

7. 创建一个service来处理数据获取逻辑。在data.service.ts文件中添加以下代码：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class DataService {
  private baseUrl = 'https://example.com/api';

  constructor(private http: HttpClient) {}

  getData(): Observable {
    return this.http.get(`${