Angular 2导航到同一路线并更新路线数据

标签 angular

有没有办法强制路由器导航到同一条路线,以便通过两次调用此 canActivate 守卫来更新路线数据:

@Injectable()
export class LevelGuard implements CanActivate {

    private user_query_: string;
    private level_query_: string;

    constructor(private router_: Router, private query_resolver_: QueryResolver) { };

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {

        let user: string = route.params["user"];
        let level: string = route.params["level"];

        if (!user && !level) { //=> "/create"
            this.query_resolver_.setQuery({ user: this.user_query_ || "none", level: this.level_query_ || "none" });
            this.level_query_ = "";
            this.user_query_ = "";
            return true;
        }
        else if (user && !level) { //=> "/create/:user"
            this.router_.navigate(["/create"]);
            this.level_query_ = "none";
            this.user_query_ = user;
            return false;
        }
        else { //=> "/create/:user/:level"
            this.router_.navigate(["/create"]);
            this.level_query_ = level;
            this.user_query_ = user;
            return false;
        }
    };
}

如果路由已经是“/create”,那么当这个 canActivate 守卫重定向到“/create”时,它应该为“/create/:user”和“/create/:user/:level”做这件事,守卫不会被第二次召唤。有一个更复杂的路由方案可以绕过这个问题,但这会大大简化它。

编辑:解决这个问题的一种方法是添加一个虚拟组件,导航到它然后返回到“/create”,但它会导致明显的转换并且组件不会被重用。

this.router_.navigate(["/redirect"]).then((nav) => {
    this.router_.navigate(["/create"]);
});

最佳答案

canActivate 不适用于子路由。

您需要使用canActivateChild 并将其设置在您的路由器上:

路由器

{
    path: '/create',
    loadChildren: 'yourModule#YourModule',
    canLoad: [LevelGuard ],
    canActivateChild: [LevelGuard ]
  },

守卫

只需添加您的LevelGuard:

canActivateChild() {
    // your code here
}

关于Angular 2导航到同一路线并更新路线数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43544289/

相关文章:

带 Angular C++ HTTP 服务器(客户端上的 Typescript)

angular - 如何将表单组控件值传递给在同一表单组中使用的自定义验证器?

angular - 等待 Observable 在 Observable 内完成

javascript - Angular 5 中 Observable 中 'this' 的范围

javascript - Angular2 单 ngFor 用于多个数组

angular - 如何动态地将组件作为子组件添加到指令中?

javascript - 如何在不使用 window.location.reload() 的情况下刷新/重新加载 angular 2 应用程序?

javascript - 选择全部复选框 Angular Material 5 | Gmail 样式如果选择个人,它也会选择

html - 是否可以使用 Angular 2 html 文件而不是组件?

html - 如何在没有第三方的情况下使用 Angular/Typescript 对 HTML 表格进行排序?