大佬教程收集整理的这篇文章主要介绍了如何制作Angular2 Service单例?,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
一旦用户登录,我将我的Authservice中的布尔值更改为true以指示用户已登录.这需要在应用程序的整个生命周期中保留.
下面给出了源代码:
AUTH-guard.service.ts
import { Injectable } from '@angular/core'; import { CanActivate,Router,ActivatedRouteSnapshot,RouterStateSnapshot } from '@angular/router'; import { Authservice } from './auth.service'; @Injectable() export class AuthGuardservice implements CanActivate { constructor(private authservice: Authservice,private router: Router) {} canActivate(route: ActivatedRouteSnapshot,state: RouterStateSnapshot): Boolean { let url: String = state.url; return this.checkLogin(url); } checkLogin(url: String): Boolean { console.log('Auth Guard service: ' + this.authservice.isLoggedIn); if (this.authservice.isLoggedIn) { return true; } // Store the attempted URL for redirecTing this.authservice.redirectUrl = url; // Navigate to the login page with extras this.router.navigate(['/admin','admin-login']); return false; } }
auth.service.ts
import { Injectable } from '@angular/core'; import { http } from '@angular/http'; import { User } from '../user/shared/user.model'; import { serviceBase } from '../../core/service.base'; import { appConfig } from '../../core/app.config'; @Injectable() export class Authservice extends serviceBase { public isLoggedIn: Boolean = false; redirectUrl: String; apiUrl: String; constructor(private http: http) { super(); this.apiUrl = appConfig.apiBaseUrl + '/users/signin'; } signin(user: User,successCallBACk,errorCallBACk) { return this.http.post(this.apiUrl,user).subscribe( res => { this.isLoggedIn = true; successCallBACk(res); },err => { //this.isLoggedIn = false; errorCallBACk(err); } ); } }
login.component.ts
import { Component,OnInit } from '@angular/core'; import { FormGroup,FormBuilder,FormControl,Validators } from '@angular/forms'; import { Router } from '@angular/router'; import { User } from '../../user/shared/user.model'; import { Authservice } from '../auth.service'; @Component({ modulEID: module.id,templateUrl: 'login.component.html' }) export class AdminLoginComponent implements OnInit{ user: User; userLoginForm: FormGroup; constructor( private formBuilder: FormBuilder,private authservice: Authservice,private router: Router){ thi@R_618_11163@ser = new User(); } ngOnInit(){ this.buildLoginForm(); } buildLoginForm() { ... } login() { if(!thi@R_618_11163@serLoginForm.valid) return false; this.authservice.signin(thi@R_618_11163@ser,response => { console.log('Login Component: ' + this.authservice.isLoggedIn); this.router.navigate(['/admin','products']); },response => {} ); } }
控制台输出
XHR finished loading: POST "http://localhost:3000/api/users/signin". login.component.ts:40 Login Component: true auth-guard.service.ts:23 Auth Guard service: false
编辑:app.module.ts
import { NgModule } from '@angular/core'; ... import { AuthGuardservice } from './auth/auth-guard.service'; import { Authservice } from './auth/auth.service'; @NgModule({ imports: [ ... AdminRoutIngModule ],exports: [ ],declarations: [ ... AdminLoginComponent,... ],providers: [ AuthGuardservice,Authservice,bootstrap:[] }) export class AdminModule {}
我在这做错了什么?任何帮助,将不胜感激.
您还获得了延迟加载模块的新实例(使用loadChildren加载).延迟加载的模块获得自己的根范围,如果在该延迟加载的模块中提供该服务,则此模块中的组件和服务将获得注入的服务的不同实例.
为确保您的整个应用程序只有一个实例,请仅在AppModule或AppModule加载的模块中直接或间接使用导入提供:[…].
以上是大佬教程为你收集整理的如何制作Angular2 Service单例?全部内容,希望文章能够帮你解决如何制作Angular2 Service单例?所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。