Question

我刚开始学习Angular，我看到了这段代码：

export class ProductListComponent implements OnInit {

  private Products: Product[];


  constructor(private _activatedRoute: ActivatedRoute) 
  {

  }

  ngOnInit() {
    this.Products = this._activatedRoute.snapshot.data['Products'];
  }

}

使用此代码获取数据无关紧要：

this._activatedRoute.snapshot.data['Products'];

为什么不使用服务来获取数据？我想知道这些数据从何而来？：o

顺便说一句，不应该有用于从数据库获取数据的服务？而不是ActivatedRoute？

谢谢你们干杯

Answer 1

this._activatedRoute.snapshot.data['Products'];这段代码没有从数据库中获取数据，你对此感到困惑。

这是您通过路线导航时发送的数据

在导航期间，在应用重定向后，路由器会创建RouterStateSnapshot

那么什么是RouteStateSnapshot:

官方定义：

包含有关与组件关联的路由的信息在特定时刻装入插座。 ActivatedRouteSnapshot也可用于遍历路由器状态树。

更多解释：

RouteStateSnapshot是一个表示的不可变数据结构路由器在特定时刻的状态。任何时候添加或删除组件或更新参数，新快照已创建。

以下是snapshot

的实际代码

interface RouterStateSnapshot {
  root: ActivatedRouteSnapshot;
}

interface ActivatedRouteSnapshot {
  url: UrlSegment[];
  params: {[name:string]:string};
  data: {[name:string]:any};

  queryParams: {[name:string]:string};
  fragment: string;

  root: ActivatedRouteSnapshot;
  parent: ActivatedRouteSnapshot;
  firstchild: ActivatedRouteSnapshot;
  children: ActivatedRouteSnapshot[];
}

它包含URL，component，data，params等详细信息

让我们看看示例和路线配置：

[
  {
    path: ':folder',
    children: [
      {
        path: '',
        component: ConversationsCmp
      },
      {
        path: ':id',
        component: ConversationCmp,
        children: [
          {
            path: 'messages',
            component: MessagesCmp
          },
          {
            path: 'messages/:id',
            component: MessageCmp,
            resolve: {
              message: MessageResolver
            }
          }
        ]
      }
    ]
  }
]

当我们导航到/inbox/10/messages/11时，路由器会查看URL并构建以下RouterStateSnapshot：

component: MessageCmp
url: [‘messages’, ‘11’]
params: {id: ’10‘}
data: {}

因此，您正在考虑的product data可能来自此route data

This is the refered documentation

Here is the documentation

如何使用ActivatedRoute.snapshot.data ['']获取数据？

1 个答案: