Angular入门疑问：为何用ActivatedRoute.snapshot.data取数据而非服务？

嘿，刚学Angular遇到这种写法很正常，我来帮你拆解这两个问题：

1. 为什么不直接用服务获取数据？ #

这种通过activatedRoute.snapshot.data拿数据的方式，其实是Angular的**路由解析器（Route Resolver）**方案，它和直接调用服务获取数据只是适用场景不同——实际上数据大概率还是通过服务获取的，只是解析器帮你把「提前获取数据」的逻辑从组件里抽离到了路由层面。

和组件内直接调用服务相比，它的核心优势是：

• 路由会等待数据加载完成后再激活组件，组件初始化时直接就能拿到数据，不用处理「数据还在请求中」的加载状态（比如空页面、loading动画），适合那些必须依赖数据才能渲染的页面。
• 把数据预加载的逻辑和组件解耦，组件只需要专注于渲染，不用关心数据从哪来、怎么来。

当然，如果你的场景是「组件加载后再按需加载数据」（比如用户点击按钮才加载），那直接调用服务会更灵活。

2. 这个data['Products']的数据来源是哪里？ #

数据来自你路由配置里的resolve属性。你需要在对应的路由模块（比如AppRoutingModule）里，为这个组件的路由配置一个解析器类，示例如下：

第一步：定义解析器类 #

这个类要实现Angular的Resolve接口，负责调用服务获取数据并返回：

import { Injectable } from '@angular/core';
import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
import { Observable } from 'rxjs';
import { Product } from './product.model';
import { ProductService } from './product.service';

@Injectable()
export class ProductResolver implements Resolve<Product[]> {
  constructor(private productService: ProductService) {}

  // 路由激活前会调用这个方法获取数据
  resolve(route: ActivatedRouteSnapshot): Observable<Product[]> {
    return this.productService.getProducts(); // 这里才是真正调用服务拿数据的地方
  }
}

第二步：在路由配置里关联解析器 #

把上面的解析器绑定到ProductListComponent的路由上，注意resolve对象的key就是你组件里data['Products']的key：

import { Routes, RouterModule } from '@angular/router';
import { ProductListComponent } from './product-list.component';
import { ProductResolver } from './product.resolver';

const routes: Routes = [
  {
    path: 'products', // 你的路由路径
    component: ProductListComponent,
    resolve: {
      Products: ProductResolver // 这里的key和组件里的data['Products']对应
    }
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers: [ProductResolver] // 别忘了把解析器加入提供者
})
export class AppRoutingModule {}

当用户访问/products路径时，Angular会先调用ProductResolver的resolve方法获取数据，拿到数据后才会激活ProductListComponent，同时把数据存入activatedRoute.snapshot.data，这样组件就能通过this._activatedRoute.snapshot.data['Products']直接拿到了。

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