angular2:CanDeactivate 守卫 [英] angular2: CanDeactivate guard
问题描述
我创建了一个 CanDeactivate 守卫，它返回一个可观察的对象，并将其应用于加载在内部嵌套路由器出口中的组件.每当有人尝试导航到另一个 url 时，是否应该调用此守卫?我问这个是因为这在我的情况下不会发生.
I've created a CanDeactivate guard which returns an observable and it's applied to a component which is loaded in a inner nested router-outlet. Should this guard be called whenever one tries to navigate to another url? I'm asking this because this is not happening in my case.
就我而言，只有第一个不同"的 URL 才会调用守卫.让我试着用一个例子来解释它.假设我总是返回 false 并且我试图从同一组件导航到不同的网址:
In my case, the guard will only get called for the first "different" URL. Let me try to explain it with an example. Assume I'm always returning false and I'm trying to navigate to different urls from the same component:
/A --> guard called
/B --> guard called
/B --> no navigation and no guard called
/A --> guard called
/A -->guard not called and no navigation
这是预期的行为吗?
编辑 嗯，好像是这样.刚刚构建了一个包含 3 个组件的小示例，并且只会在用户第一次尝试导航到特定 url 时调用守卫……这真的很奇怪……
edit Well, it seems like it is. Have just built a small sample with 3 components and the guard will only be called for the 1st time the user tries to navigate to a specific url...this is really weird...
无论如何，这是我正在使用的代码:
Anyways, here's the code I'm using:
// app.routing
import {NgModule} from "@angular/core";
import {Routes, RouterModule, Route, CanDeactivate, ActivatedRouteSnapshot,
RouterStateSnapshot} from "@angular/router";
import { MainComponent } from "./main/main.component";
import { OtherComponent } from "./other/other.component";
import { Other3Component } from "./other3/other3.component";
import {Observable} from "rxjs/observable";
const fallback: Route = {
path: "**",
redirectTo: "/main",
pathMatch: "full"
};
export class Test implements CanDeactivate<MainComponent>{
canDeactivate(component: MainComponent, route: ActivatedRouteSnapshot,
state: RouterStateSnapshot): Observable<boolean> | boolean{
console.log("in");
return false;
}
}
export const rotas: Routes = [
{
path: "main",
component: MainComponent,
canDeactivate: [Test]
},
{
path: "other",
component: OtherComponent
},
{
path: "other3",
component: Other3Component
},
fallback
];
@NgModule({
imports: [RouterModule.forRoot(rotas)],
exports: [RouterModule]
})
export class AppRoutingModule{}
//app.component.html<代码>
<a routerLink="/main">Main</a><a routerLink="/other">其他</a><a routerLink="/other3">Other3</a>
//app.component.html
<h1>
<a routerLink="/main">Main</a>
<a routerLink="/other">Other</a>
<a routerLink="/other3">Other3</a>
</h1>
一切都是通过 angular-cli 生成的(例如:ng component XXX).是的，CanDeactivate 守卫将始终返回 false，因此您将无法卸载主要组件.所以，当我第一次点击其他时，守卫就会被召唤.如果再次单击其他，则不会调用任何守卫.但是，如果我点击 other3，那么守卫就会被召唤.在单击其他链接(例如:其他)之前，单击 other3 不会真正执行任何操作...
Everything was generated through angular-cli (ex.: n g component XXX). Yes, the CanDeactivate guard will always return false so you won't be able to unload the main component. So, the first time I click other, the guard gets called. If click again on other, no guard gets called. However, if I click over other3, then the guard gets called. Clicking over other3 won't really do anything until I've clicked on other link (ex.: other)...
这是预期的行为吗?我必须说，每次我点击另一个链接时，我都希望我的后卫被击中......
Is this the expected behavior? I must say that I expected my guard to get hit everytime I hit another link...
谢谢.
路易斯
推荐答案
该死，bug...自我注意:下次，先检查问题板
Damn, bug...Note to self: next time, check the issues board first
https://github.com/angular/angular/issues/12851#event-880719778
这篇关于angular2:CanDeactivate 守卫的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
