Angular 2+如何在Provider中获取当前页面位置信息

嘿，从AngularJS转Angular 6确实得适应不少新东西，不过你想在应用启动时从URL里捞指定片段，替换Provider里的硬编码来拉API数据，这个需求太常见了，我给你捋捋靠谱的实现步骤～

首先，核心思路是利用Angular的APP_INITIALIZER确保API数据在应用启动前加载完成，同时通过Router或路由快照获取URL中的目标片段，替换掉硬编码的部分。

步骤1：创建初始化服务（你的Provider） #

这个服务负责获取URL片段、调用API并存储数据：

import { Injectable } from '@angular/core';
import { Router, RouterStateSnapshot } from '@angular/router';
import { HttpClient } from '@angular/common/http';
import { filter, take } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class AppInitService {
  private apiData: any;

  constructor(private router: Router, private http: HttpClient) {}

  // 从URL中提取目标片段的方法，根据你的需求选对应方式
  private getTargetUrlSegment(): string {
    // 方式1：获取路由参数（比如路由配置是 /app/:segmentId）
    const routeSnapshot: RouterStateSnapshot = this.router.routerState.snapshot;
    const segment = routeSnapshot.root.firstChild?.params['segmentId'];

    // 方式2：获取URL路径中的某一段（比如 /app/abc/data 里的abc）
    // const pathParts = window.location.pathname.split('/');
    // const segment = pathParts[2];

    // 方式3：获取hash片段（比如 #/abc 里的abc）
    // const hashParts = window.location.hash.split('/');
    // const segment = hashParts[1];

    return segment || 'default-value'; // 兜底值，防止URL无预期片段时崩溃
  }

  // 加载API数据的方法，会在应用启动前执行
  loadApiData(): Promise<any> {
    // 先确保路由导航完成（应对初始重定向的情况）
    return this.router.events.pipe(
      filter(event => event instanceof NavigationEnd),
      take(1)
    ).toPromise().then(() => {
      const targetSegment = this.getTargetUrlSegment();
      // 替换硬编码的API地址，用URL片段拼接
      const apiUrl = `https://your-api-domain.com/api/data/${targetSegment}`;

      return this.http.get(apiUrl)
        .toPromise()
        .then(data => {
          this.apiData = data;
          console.log('API数据加载成功:', data);
        })
        .catch(error => {
          console.error('API数据加载失败:', error);
          return Promise.reject(error);
        });
    });
  }

  // 供其他组件/服务获取加载好的API数据
  getLoadedData(): any {
    return this.apiData;
  }
}

步骤2：配置APP_INITIALIZER，让服务在启动前执行 #

在AppModule里注册初始化器，确保应用启动前完成数据加载：

import { NgModule, APP_INITIALIZER } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { RouterModule } from '@angular/router';

import { AppComponent } from './app.component';
import { AppInitService } from './app-init.service';
import { YourComponent } from './your.component'; // 替换成你的组件

// 初始化工厂函数，调用服务的加载方法
export function appInitializerFactory(appInitService: AppInitService) {
  return () => appInitService.loadApiData();
}

@NgModule({
  declarations: [
    AppComponent,
    YourComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    RouterModule.forRoot([
      // 这里配置你的路由，比如带参数的路由
      { path: 'app/:segmentId', component: YourComponent },
      // 其他路由配置...
    ])
  ],
  providers: [
    AppInitService,
    {
      provide: APP_INITIALIZER,
      useFactory: appInitializerFactory,
      deps: [AppInitService],
      multi: true
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

关键注意事项 #

• 一定要导入HttpClientModule，否则无法发起API请求；
• 加入路由导航完成的监听是为了应对初始路由重定向的场景，避免获取到错误的URL片段；
• 兜底值很重要，当URL中没有预期的片段时，能保证应用不会直接崩溃；
• 如果你的Provider是全局共享的，用providedIn: 'root'就能确保单例，不用在模块里重复声明。

这样一来，应用启动时就会自动从URL提取目标片段，替换硬编码去拉取API数据，完全符合你的需求啦～

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