正在Angular 2中的扩展RouterOutlet中导入自定义服务以进行身份验证

Importing custom service in extended RouterOutlet in Angular 2 for authentication

本文关键字：服务 自定义 身份验证 RouterOutlet Angular 扩展 正在 导入      更新时间：2023-09-26

我正试图在Angular 2中设置身份验证，在以下文章（以及之前关于SO的问题）的帮助下，我成功创建了自己的扩展RouterOutlet:

export class LoggedInRouterOutlet extends RouterOutlet {
    publicRoutes: any;
    private parentRouter: Router;
    private loginService: LoginService;
    constructor(_viewContainerRef: ViewContainerRef, _loader: DynamicComponentLoader,
        _parentRouter: Router, @Attribute('name') nameAttr: string,
        private loginService: LoginService) {
        super(_viewContainerRef, _loader, _parentRouter, nameAttr);
        this.parentRouter = _parentRouter;
        this.publicRoutes = {
            'login': true
        };
    }
    _canActivate(url: string, admin: boolean) {
        => Checks with my loginService if user is authenticated
    }

    activate(instruction: ComponentInstruction) {
            if (this._canActivate(url, isAdmin)) {
                => Go to desired URL
            } else {
                => Go to login page
            }
    }
}

这个代码的问题是我的typescript生成了以下错误：

"标识符'loginService'重复"

我的代码确实按预期运行，我只是不喜欢在将typescript解析为javascript时出现typescript错误。然而，如果我重命名第二个loginService，我的代码确实会中断，我可以找到

类型错误：this.loginService未定义

在我的控制台里。我想知道是否有人知道如何解决这个问题？

您在类中声明loginService两次

export class LoggedInRouterOutlet extends RouterOutlet {
    publicRoutes: any;
    private parentRouter: Router;
    // private loginService: LoginService; // <== remove this

并将参数命名为loginService而不是loginService2

constructor(_viewContainerRef: ViewContainerRef, _loader: DynamicComponentLoader,
    _parentRouter: Router, @Attribute('name') nameAttr: string,
    private loginService: LoginService) {
    super(_viewContainerRef, _loader, _parentRouter, nameAttr);

构造函数参数上的private或public修饰符已经声明了具有此名称的类属性。无需再次明确声明该属性。

相关文章：