在 Angular 15 中使用 CanActivate 和 BreakpointObserver

Question

Angular 15 建议使用任何 JavaScript 函数作为

CanActivate

守卫。我想在这个方法中使用

BreakpointObserver

。我有一个

BreakpointService

需要

BreakpointObserver

作为依赖。

export const isMobile = () => {
    return true;
}

import { Injectable } from '@angular/core';
import { BreakpointObserver, BreakpointState, Breakpoints } from '@angular/cdk/layout';

@Injectable()
export class BreakpointService {

    isDesktop = false;
    isMobile = false;

    constructor(public breakpointObserver: BreakpointObserver) {
        this.breakpointObserver
            .observe([Breakpoints.Handset])
            .subscribe((result: BreakpointState) => {
                this.isMobile = result.matches;
                this.isDesktop = !this.isMobile;
            });
    }
}

我应该怎么做才能将

BreadkpointService

注入

CanActivate

函数以使用它的属性

isMobile

或

isDesktop

？

Answer 1

可以使用注入函数来解决依赖

import { inject } from '@angular/core';    
export function customCanActive(...arg): CanMatchFn {
            const breakpointService = inject(BreakpointService);
            ....
 }