Question

我想知道是否有办法在调用navigate方法时获取Angular路由器生成的网址。

例如：

this._router.navigate(['browse'], { queryParams: { section: 'users', isActive: true } });

可能会导致/browse#?section=users&isActive=true

的导航

如何在不执行导航或更新浏览器中的URL的情况下获取此路线？

Answer 1

查看createUrlTree：

this._router.createUrlTree(
    ['browse'], { queryParams: { section: 'users', isActive: true } });

返回的对象，UrlTree有一个toString函数，可以为您提供所需的内容。

您可以在内部navigate实际使用createUrlTree的{{3}}中看到：

navigate(commands: any[], extras: NavigationExtras = {skipLocationChange: false}): Promise<boolean> {
    validateCommands(commands);
    return this.navigateByUrl(this.createUrlTree(commands, extras), extras);
}

Answer 2

查看Angular 4 routing - redirectTo with skipLocationChange的所选答案您可以订阅路由器导航事件并添加＆＃34; skipLocationChange＆＃34;避免切换URL的参数

Answer 3

该代码同时适用于：哈希（例如https://site/#/user）和非哈希网址

public openInNewTab(router: Router, namedRoute) {
    let newRelativeUrl = router.createUrlTree([namedRoute]);
    let baseUrl = window.location.href.replace(router.url, '');

    window.open(baseUrl + newRelativeUrl, '_blank');
}

获取将由router.navigate生成的URL

3 个答案: