Question

常见情况：向用户显示/ login窗口。他登录并重定向到/ dashboard，他还可以在/ users路径中加载其他用户的列表。然后，他单击一个用户并最终到达/ users / 1路径。现在，所选用户的数据已预先加载到用户列表中，并显示在屏幕上。

父组件是“ /用户” 子路径为“：userId”

不寻常但可能的情况：用户通过粘贴网址直接进入/ users / 1路径（登录令牌仍然有效，因此无需登录）。

目前我们还没有加载用户列表，也没有选择用户的数据。

我使用路径解析器加载用户列表。它在打开路径之前加载列表。问题出在：userid子路径。我只能在子组件的构造函数或Init方法中获取此参数。

这不好，因为每个带有子路径的组件都必须提取该参数并从列表中“选择”适当的用户。

我希望能够在单个位置选择用户。

我尝试为每个子路径创建单个解析器。该解析器尝试提取：userid参数，然后选择它。我也尝试将解析器仅分配给父路径。我还尝试过创建CanActivate守护程序，该守护程序应提取：userid。

这些方法均未产生任何结果，因为route [.snapshot] .paramMap为空。

我什至尝试订阅该路线的paramMap，但结果相同。

路由器文件

{ path: '/users', component: parentComponent, children: [
        { path: ':userid', component: userComponent, resolve: { user: SelectUserResolver } }
        { path: ':userid/edit', component: userEditComponent, resolve: { user: SelectUserResolver } }
        { path: ':userid/show, component: userShowComponent, resolve: { user: SelectUserResolver } }
        ..... many more paths .....
    ]
}

解析器文件

export class SelectUserResolver implement Resolve<any> {
    constructor(private userService: UserService, private route: ActivatedRoute) {}
    resolve() {
        let userId = this.route.snaphot.paramMap.get('userid'); //<- empty map
        this.userService.selectUser(userId);
    }
}

parentComponent

export class parentComponent {
    constructor(private route: ActivatedRoute) {
        let userId = this.route.snapshot.paramMap.get('userid'); //<- empty map
    }
}

userComponent

export class userComponent implements OnInit {
    constructor(private route: ActivatedRoute) {}
    ngOnInit() {
         let userId = this.route.snapshot.paramMap.get('userid');// <- this works.
    }
}

我希望paramMap具有userId，但是无论我做什么，它都是空的。在子组件内部访问它是非常糟糕的，因为我需要为创建的每个组件取消此代码。

Answer 1

对于解析器，您无需向构造函数中插入ActivatedRoute。根据文档：https://angular.io/api/router/Resolve

实现Resolve<T>时，可以从以下方法获取路由：

resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<T> | Promise<T> | T

如何在子组件初始化之前获取参数

1 个答案: