Angular 5自定义Restaurant模块加载时初始化共享变量供组件访问

嘿，这个需求其实很典型，在Angular里要实现模块级的数据共享，最靠谱的方式就是用模块内的共享服务，再配合路由守卫确保数据在模块加载时就准备好。下面给你一步步拆解实现方式：

第一步：创建模块专属的共享服务 #

首先在你的Restaurant模块下创建一个服务，比如RestaurantDataService，这个服务只在当前模块的providers里注册，这样只有该模块的组件能访问它，不会和其他模块冲突。

代码示例：

// restaurant-data.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, BehaviorSubject, tap } from 'rxjs';

@Injectable() // 注意这里不要加`providedIn: 'root'`，确保只在模块内提供
export class RestaurantDataService {
  // 用BehaviorSubject存储共享数据，组件可以订阅获取实时更新
  private restaurantDataSubject = new BehaviorSubject<any>(null);
  public restaurantData$ = this.restaurantDataSubject.asObservable();

  constructor(private http: HttpClient) {}

  // 获取数据的核心方法
  fetchRestaurantData(): Observable<any> {
    return this.http.get('你的API接口地址').pipe(
      tap(data => {
        // 将获取到的数据存入Subject，供所有组件订阅
        this.restaurantDataSubject.next(data);
      })
    );
  }

  // 提供同步获取数据的方法（适合确认数据已加载的场景）
  getCurrentData(): any {
    return this.restaurantDataSubject.value;
  }
}

然后在Restaurant模块的@NgModule里注册这个服务：

// restaurant.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RestaurantlayoutComponent } from './restaurantlayout/restaurantlayout.component';
import { BannerComponent } from './banner/banner.component';
import { MenuComponent } from './menu/menu.component';
import { RecommendComponent } from './recommend/recommend.component';
import { BasketComponent } from './basket/basket.component';
import { RestaurantRoutingModule } from './restaurant-routing.module';
import { RestaurantDataService } from './restaurant-data.service';

@NgModule({
  declarations: [
    RestaurantlayoutComponent,
    BannerComponent,
    MenuComponent,
    RecommendComponent,
    BasketComponent
  ],
  imports: [
    CommonModule,
    RestaurantRoutingModule
  ],
  providers: [RestaurantDataService] // 在模块内注册服务，限定访问范围
})
export class RestaurantModule { }

第二步：在模块加载时自动获取数据（两种可选方式） #

方式一：用路由Resolve守卫（推荐） #

这种方式能确保Restaurantlayout组件渲染前就完成数据加载，避免组件出现空数据的情况。

1. 创建Resolve守卫：

// restaurant-data.resolve.ts
import { Injectable } from '@angular/core';
import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs';
import { RestaurantDataService } from './restaurant-data.service';

@Injectable()
export class RestaurantDataResolve implements Resolve<any> {
  constructor(private dataService: RestaurantDataService) {}

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any> {
    // 路由会等待这个Observable完成后，才激活目标组件
    return this.dataService.fetchRestaurantData();
  }
}

2. 在Restaurant模块的路由配置中添加Resolve：

// restaurant-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { RestaurantlayoutComponent } from './restaurantlayout/restaurantlayout.component';
import { RestaurantDataResolve } from './restaurant-data.resolve';

const routes: Routes = [
  {
    path: '',
    component: RestaurantlayoutComponent,
    resolve: {
      restaurantData: RestaurantDataResolve // 绑定Resolve守卫
    }
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
  providers: [RestaurantDataResolve] // 注册守卫
})
export class RestaurantRoutingModule { }

方式二：在服务初始化时自动获取数据 #

如果不需要严格在路由激活前加载数据，也可以在服务的构造函数里自动触发数据请求：

// 修改restaurant-data.service.ts的构造函数
constructor(private http: HttpClient) {
  // 组件注入服务时自动发起数据请求
  this.fetchRestaurantData().subscribe();
}

第三步：在模块内组件中访问共享数据 #

不管用哪种加载方式，模块内的所有组件都可以通过注入RestaurantDataService来获取共享数据：

比如在BannerComponent中使用：

// banner.component.ts
import { Component, OnInit } from '@angular/core';
import { RestaurantDataService } from '../restaurant-data.service';

@Component({
  selector: 'app-banner',
  templateUrl: './banner.component.html',
  styleUrls: ['./banner.component.css']
})
export class BannerComponent implements OnInit {
  bannerContent: any;

  constructor(private dataService: RestaurantDataService) { }

  ngOnInit(): void {
    // 订阅数据变化，确保数据更新时组件能同步刷新
    this.dataService.restaurantData$.subscribe(data => {
      if (data) {
        this.bannerContent = data.banner; // 假设接口返回的数据包含banner字段
      }
    });

    // 如果确认数据已提前加载，也可以直接同步获取
    // this.bannerContent = this.dataService.getCurrentData().banner;
  }
}

这样一来，只要Restaurant模块被加载，数据就会自动获取，模块内的Banner、Menu等所有组件都能通过这个共享服务访问到统一的数据了。

内容的提问来源于stack exchange，提问作者Sandip Nag