问题描述：在Angular中，当使用canDeactivate守卫时，发现值显示为null，并且canDeactivate方法不起作用。

解决方法：

1. 确认路由配置中是否正确使用了canDeactivate守卫，并将守卫方法绑定到相应的组件上。

import { CanDeactivate } from '@angular/router';

export class MyComponent implements CanDeactivate {

  canDeactivate() {
    // 守卫逻辑代码
  }
}

// 路由配置
{
  path: 'my-component',
  component: MyComponent,
  canDeactivate: [MyDeactivateGuard]
}

2. 确认守卫类中的canDeactivate方法是否正确实现，并返回一个Observable或Promise。

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

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

@Injectable()
export class MyDeactivateGuard implements CanDeactivate {

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

3. 确认组件中的canDeactivate方法是否正确实现，并返回一个Observable或Promise。

import { Component } from '@angular/core';
import { Observable } from 'rxjs';

@Component({
  selector: 'my-component',
  template: '...'
})
export class MyComponent implements CanComponentDeactivate {

  canDeactivate(): Observable | Promise | boolean {
    // 守卫逻辑代码
  }
}

4. 确认是否正确导入并将守卫类添加到模块的providers数组中。

import { NgModule } from '@angular/core';
import { MyDeactivateGuard } from './my-deactivate.guard';

@NgModule({
  providers: [MyDeactivateGuard],
  ...
})
export class AppModule { }

5. 如果以上步骤都正确，但问题仍然存在，可能是由于其他代码或逻辑导致的。可以尝试使用调试工具（如浏览器的开发者工具）来跟踪代码执行路径，并检查相关值的变化。