身份验证卫士给了我17个Angular 的任何类型

发布于02月22日

我在17号角创建了一个功能性后卫

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

export const checkoutGuard: CanActivateFn = (route, state) => {
    const customerService = Inject(CustomerService);
    const router = Inject(Router);
    if(customerService.isAuthenticated()) {
         return true;
    } else {
         return router.navigateByUrl('/login');
    }
};

我得到错误CustomerService.isAuthenticated不是一个函数. 我在app.config.ts providers: [provideRouter(routes), provideHttpClient(), CustomerService,] 中声明了该服务这就是第II号路由在{path:'checkout', component:CheckoutComponent, canActivate:[checkoutGuard]}号路由中宣布的这是服务等级

@Injectable({   providedIn: 'root' }) 
export class CustomerService { 
     isAuthenticated():boolean {    return true;   } 
}

推荐答案

问题的根本原因是使用inject而不是Inject，请更改它

导入:

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

inject->；使用外部构造函数从DI加载依赖项

Inject->；用于在构造函数中从依赖项中加载依赖项(有时需要)

我们可以从app.config.ts提供程序数组中删除CustomerService，因为这是仅为环境提供程序保留的，然后在客户服务中可以设置providedIn: root，这意味着服务可以在整个应用程序中访问，所以即使是内部警卫！

@Injectable({
    providedIn: 'root',
})
export class CustomerService {
    ...

然后您需要判断您是如何定义的，isAuthenticated它应该是一个函数/方法，如果它是一个属性，请将IF条件更改为

export const checkoutGuard: CanActivateFn = (route, state) => { 
    const customerService = inject(CustomerService); 
    const router = inject(Router); 
    if(customerService.isAuthenticated) { 
        return true; 
    } else { 
        return router.navigateByUrl('/login'); 
    } 
};

身份验证卫士给了我17个Angular 的任何类型

推荐答案

Angular相关问答推荐

Angular -在使用react 式表单和数组时try 使最后一个表单控制不需要-带有添加和删除按钮

我们应该在Angular 从14升级到15的过程中也升级茉莉花和业力相关的依赖吗？

访问Angular 模板中的HTML元素属性

Angular KendoGrid RowReorderable，drop不适用于新添加的行

[NullInjectorError]：R3InjectorError(Standalone[_AppComponent])[]：NullInjectorError：No provider for _HttpClient

我正在try 将一个带有模块联盟的Angular 8项目expose 到另一个Angular 项目，Angular 是15，这可能吗？如果是这样，有什么建议吗？

Angular 17水化-POST请求同时触发客户端/服务器端，而GET请求仅触发服务器端？

如何在独立应用程序中全局禁用基于媒体查询的Angular 动画？

http 调用的 RxJs 数组

BehaviorSubject 在 Angular 中制作数据之间的时间表(或计时器)

Angular 重新渲染仅使用ngrx在表中更改的行

如何重置表单中的特定字段？

如何从组件模板将数组作为 Input() 传递？

带有 Angular 的 Font Awesome 5

未绑定断点 - VS Code ｜ Chrome ｜ Angular

如何以编程方式触发`valueChanges`？

Angular 2 单元测试 - 出现错误无法加载ng：///DynamicTestModule/module.ngfactory.js

如何在 angular2 中的 div 的 contenteditable 上使用 [(ngModel)]？

NPM 脚本 start退出，但未指示 Angular CLI 正在侦听请求

此类通过 SomeModule -> SomeComponent 对消费者可见，但不会从顶级库入口点导出