为什么使用 Activated Route.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'];

为什么服务不用于获取数据？我想知道这些数据是从哪里来的？

Answer 1

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

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

在导航过程中，应用重定向后，路由器会创建一个RouterStateSnapshot

那么什么是RouteStateSnapshot:

官方定义：

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

多一点解释：

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

这是引用的文档

这是文档