为什么使用 ActivatedRoute.snapshot.data[''] 获取数据？

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:

官方定义：

Contains the information about a route associated with a component loaded in an outlet at a particular moment in time. ActivatedRouteSnapshot can also be used to traverse the router state tree.

再多解释一下：

RouteStateSnapshot is an immutable data structure representing the state of the router at a particular moment in time. Any time a component is added or removed or parameter is updated, a new snapshot is created.

这是 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[''] 获取数据？

How come data is fetched with ActivatedRoute.snapshot.data[''] ?

angular-services

angular-components

angular