angular——前置路由守卫Resolver使用

angular——前置路由守卫Resolver的使用场景

我们现在有一个业务场景，有两个不同路由地址的页面，页面的ui完全一样，但需要注入不同的数据，渲染不同的效果，下面给出使用Resolver守卫的设计方法

第一步：我们创建了两个Resolver守卫，我们在resolve方法中分别返回不同的字符串，first-Data，second-Data

第二步：我们需要在管理两个路由的路由子模块中，将两个resolver守卫注入进去

第三步：我们在两个路由共同使用的组件中，收集路由守卫为我们送入的数据，并按照业务逻辑展示到视图上

我们定义了ActivatedRoute类的实例，通过在构造函数体中将resolver注入的数据，提取出来赋给我们绑定视图的数据showData上

現在，我们实现的效果如下：