要检查和取消所有用户角色，您可以使用Angular的角色服务和路由守卫。

首先，创建一个名为role.service.ts的角色服务文件，并在其中定义一个名为RoleService的服务类。在这个服务类中，可以定义一个roles数组来存储所有角色。这个数组可以在构造函数中初始化，也可以从后端服务器获取。

// role.service.ts

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class RoleService {
  roles: string[] = ['admin', 'user', 'guest'];

  constructor() { }
}

接下来，您可以在需要检查角色的组件中注入角色服务，并使用hasRole方法来检查用户是否具有特定角色。

// app.component.ts

import { Component } from '@angular/core';
import { RoleService } from './role.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(private roleService: RoleService) {}

  hasRole(role: string): boolean {
    return this.roleService.roles.includes(role);
  }
}

在模板中，您可以使用*ngIf指令和hasRole方法来显示或隐藏特定角色的内容。

只有管理员可以看到这个内容。
只有普通用户可以看到这个内容。
只有访客可以看到这个内容。

如果要取消用户的所有角色，您可以在角色服务中添加一个名为clearRoles的方法，并在用户登出或注销时调用该方法。

// role.service.ts

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class RoleService {
  roles: string[] = ['admin', 'user', 'guest'];

  constructor() { }

  clearRoles(): void {
    this.roles = [];
  }
}

然后，在登出或注销的组件中，注入角色服务并调用clearRoles方法。

// logout.component.ts

import { Component } from '@angular/core';
import { RoleService } from './role.service';

@Component({
  selector: 'app-logout',
  template: `
    Logout
  `
})
export class LogoutComponent {
  constructor(private roleService: RoleService) {}

  logout(): void {
    // perform logout logic here
    this.roleService.clearRoles();
  }
}

这样，当用户注销或登出时，角色服务中的角色数组将被清空，用户将不再具有任何角色。