angular - angular2:可以停用防护

我已经创建了一个CandeActivate保护程序，它返回一个可观察值，并应用于加载在内部嵌套路由器出口中的组件。当一个人试图导航到另一个url时，是否应该调用这个守卫？我问这个是因为我的案子没有发生这种事。
在我的例子中，警卫只会被调用第一个“不同”的url。让我试着用一个例子来解释。假设我总是返回false，并且尝试从同一组件导航到不同的url：

/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时才会调用guard…这真的很奇怪…
不管怎样，这是我使用的代码：

// 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
<h1> <a routerLink="/main">Main</a> <a routerLink="/other">Other</a> <a routerLink="/other3">Other3</a> </h1>
一切都是通过angular cli生成的（例如：n g component xxx）。是的，CandeActivate保护程序将始终返回False，因此您将无法卸载主组件。所以，当我第一次点击“其他”时，警卫就被叫来了。如果再按一下另一个，就不会叫警卫了。但是，如果我点击其他3，那么警卫就会被叫来。点击other3在我点击其他链接（例如：other）之前不会做任何事情。
这是预期的行为吗？我必须说，我希望我的后卫被击中每次我击中另一个环节…
谢谢。
路易斯

最佳答案

我找到了这个解决方案，而不是为每个组件创建一个candeactivate guard，而是创建一个guard服务并将candeactivate方法添加到要添加此选项的每个组件，因此首先必须添加此服务文件“deactivate guard.service.ts”：

import { Injectable } from '@angular/core';
import { CanDeactivate } from '@angular/router';
import { Observable } from 'rxjs/Observable';

export interface CanComponentDeactivate {
  canDeactivate: () => Observable<boolean> | Promise<boolean> | boolean;
}

@Injectable()
export class DeactivateGuardService implements  CanDeactivate<CanComponentDeactivate>{

  canDeactivate(component: CanComponentDeactivate) {
    return component.canDeactivate ? component.canDeactivate() : true;
  }
}

那么您必须在应用程序模块中提供：

providers: [
    DeactivateGuardService
  ]

现在，在要保护的组件中，添加以下函数：

export class ExampleComponent {
    loading: boolean = false;
    //some behaviour that change the loading value
    canDeactivate() {
        console.log('i am navigating away');
        if (this.loading) {
            console.log('no, you wont navigate anywhere');
            return false;
        }
        console.log('you are going away, goodby');
        return true;
    }
}

您可以看到变量加载是组件的本地加载。
最后一步是将指令添加到路由模块中的组件：

{
  path: 'example',
  canDeactivate: [DeactivateGuardService],
  component: ExampleComponent
}

就这样，我希望这对你有帮助，好运。