如何再次制作 Angular2 Service Singleton....答案

【问题标题】：How to make Angular2 Service Singleton....again如何再次制作 Angular2 Service Singleton....
【发布时间】：2017-03-22 01:24:34
【问题描述】：

请允许我再次问这个问题，关于如何在 angular2 中进行单例服务。我正在尝试通过注入身份验证服务来实现身份验证防护。

但是，每当我访问受身份验证保护的路由时，总是会调用注入服务的构造函数。即 "console.log("authgaurd created")" 和 "console.log("auth services created");"在下面的 sn-p 中，每次都会调用而不是一次。

我遵循了类似问题中提出的指导方针，包括：How to make Angular2 Service singleton?

但看起来我可能遗漏了什么...帮助？

使用@angular/core": "^2.3.1

//app.module.ts

import {AuthService} from "./auth.service";
import { AuthGuard } from './auth-guard.service';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [ 
    QAModule,
    AppRoutingModule,
  ],
  providers: [AuthService,AuthGuard],
  bootstrap: [AppComponent]
})
export class AppModule { }

服务

//auth.service

@Injectable()
export class AuthService {

    constructor() {

        console.log("auth services created");
    }
}


//auth-guard.service

@Injectable()
export class AuthGuard implements CanActivate {

    constructor( authService: AuthService) {

        console.log("authgaurd created");

    }

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean  {
        return true;
    }

}

模块和路由受到保护

//qa-routing.module.ts

const routes: Routes = 
[
  { 
    path: 'qa',      
    component: QAComponent,
    canActivate: [AuthGuard],

  }

];

@NgModule({

  imports: [
   RouterModule.forChild(routes)
  ],
  exports: [
    RouterModule
  ]
})
export class QARoutingModule { }


//qa.module.ts

@NgModule({
  imports: [
    QARoutingModule
  ],
  declarations: [
    QAComponent
  ],
  providers: [ ]
})
export class QAModule {}

【问题讨论】：

标签： angular singleton angular2-routing angular2-services angular2-guards

【解决方案1】：

嗯...是的，所以真正的问题：

我正在使用引导导航栏并使用 href 作为链接。每次我单击链接时都会重新加载上下文，从而提供新的注入服务。更改了链接逻辑以使用 router.navigate 进行解析。

【讨论】：

【解决方案2】：

//app.module.ts

import {AuthService} from "./auth.service";
import { AuthGuard } from './auth-guard.service';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [ 
    QAModule,
    AppRoutingModule,
  ],
  providers: [AuthService,AuthGuard],
  bootstrap: [AppComponent]
})
export class AppModule { }



//auth-guard.service

@Injectable()
export class AuthGuard implements CanActivate {

    constructor(public authService: AuthService) {

        console.log("authgaurd created");

    }

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean  {
        return true;
    }

}

【讨论】：

抱歉什么意思？我看到您对 authguard 构造函数进行了更改，为其参数指定了公共修饰符。这似乎没有什么区别。