canDeactive | observable 保持其初始值

问题描述

• this example 看到的示例

这是我的 canDeactivate Guard：

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

@Injectable()
export class CanDeactivateGuard implements CanDeactivate<CanComponentDeactivate> {
  canDeactivate(component: CanComponentDeactivate,route: ActivatedRouteSnapshot,state: RouterStateSnapshot) {
    return component.canDeactivate ? component.canDeactivate() : true;
  }   
}

这就是我在 HomeComponent 路由中的称呼：

{ path: 'home',component: HomeComponent,canActivate: [AuthGuard],canDeactivate: [CanDeactivateGuard]},

在我的服务中，我有这个主题：

private backButtonEnabled = new BehaviorSubject<boolean>(true);
currentBackButtonEnabled = this.backButtonEnabled.asObservable();

changeCurrentBackButtonEnabled(goBack: boolean){
  this.backButtonEnabled.next(goBack);
}

在另一个组件 FiltersComponent 中，我有这个功能：

openFilters() {
  ...
  this.myService.changeCurrentBackButtonEnabled(false);
}

在 HomeComponent 中，我像这样调用 canDeactivate：

canDeactivate(): Observable<boolean> | boolean | Promise<boolean> {
  this.myService.currentBackButtonEnabled.subscribe(res => {
    console.log(res) //ALWAYS TRUE
  })
  return this.myService.currentBackButtonEnabled;
}

在应用模块中：

...

  providers: [
    CanDeactivateGuard,MyService
  ],

问题说明：

currentBackButtonEnabled 始终为真，即使当用户（单击）openFilters() 函数时，currentBackButtonEnabled 变为假

解决方法

我不完全理解你的代码，但在你的保护

principle=int(principle)
rate=int(rate)
time=int(time)

在类型脚本类/Angular 组件类中不能有同名的变量和函数。因此，这一行检查是否存在 return component.canDeactivate ? component.canDeactivate() : true; ——这总是正确的；因为你在那个组件上用那个名字定义了一个函数。

如果 canActivate 存在，则执行。

并根据您的代码：

component.canDeactivate()

如果 canDeactivate(): Observable<boolean> | boolean | Promise<boolean> { return this.service.currentBackButtonEnabled; } 方法返回的是 Observable 或 Promise，那么只要定义了该值，从布尔的角度来看，它将被视为 true。

此代码返回 false 的唯一情况是 canActivate() 返回布尔值 false。如果你想从 Observable 或 Promise 中获取结果，你必须订阅它。

,

您应该订阅 observable 以获取其新值。

this.guardService.canDeactivate().pipe(
      catchError(err => {
        this.logger.error('Observable error',err);
        throw err;
      })
    )
      .subscribe((newState) => { // do something }
      });

此外，您应该将服务注入到组件中，然后将事件广播到应该对其更改采取行动的组件，而不是相反。