службы Angular2 не впрыскивается, как одноплодная

Question

У меня есть следующие службы определена:

@Injectable() 
export class UserService { 

private _users: User[] = [] 
private _currentUser:User; 

///Creates an instance of the Angular2 Http Service 
constructor(private _http: Http) {console.log("in the constructor"; } 

Это вызывается из компонента входа:

@Component({ 
selector: 'app-login', 
templateUrl: './login.component.html', 
styleUrls: ['./login.component.css'] 
}) 
export class LoginComponent implements OnInit { 
returnUrl: string; 

constructor(private _userService: UserService, 
      private route: ActivatedRoute, 
      private router: Router) { } 

validateUser(username: string, password: string): boolean { 
    var loggedOnUser = this._userService.checkLogin(username, password); 
    ...//check if logged on 
this.router.navigate([this.returnUrl]); 

    return true; 
} 

Однако, когда есть успешный Логин, он перенаправляет на домашний маршрут, а защита аутентификации запускает новый экземпляр службы пользователя, который, поскольку он является новым экземпляром, возвращает неопределенный для аутентифицированного пользователя

@Injectable() 
export class AuthGuard implements CanActivate { 

constructor(private router: Router, private _userService: UserService) { } 

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) { 

    if (this._userService.getAuthenticatedUser()) //is undefined????? 
    { 
     return true; 
    } 

    // not logged in so redirect to login page with the return url 
    this.router.navigate(['/login'], { queryParams: { returnUrl: state.url }}); 
    return false; 
} 
} 

Мой модуль объявлен следующим образом:

@NgModule({ 
declarations: [ 
AppComponent, 
LoginComponent, 
HomeComponent, 
ManageUsersComponent, 
StandingDataComponent 
], 
imports: [ 
BrowserModule, 
FormsModule, 
HttpModule, 
AppRoutingModule 
], 
providers: [AuthGuard,UserService], 
bootstrap: [AppComponent] 
}) 
export class AppModule { } 

Мой класс маршрутизации состоит в следующем:

const appRoutes: Routes = [ 
{path: '', component: HomeComponent, canActivate:[AuthGuard]},  
{ path: 'login', component: LoginComponent }, 
{path: 'home', 
component:HomeComponent, canActivate:[AuthGuard], 
children: [{path: 'manageusers', component: ManageUsersComponent, outlet: 'innerPage'}, 
      {path: 'standingdata', component: StandingDataComponent, outlet: 'innerPage'}] 
}, 
// otherwise redirect to home 
{ path: '**', redirectTo: '' }]; 

@NgModule({ 
    imports: [RouterModule.forRoot(appRoutes)], 

exports: [RouterModule] 
}) 
export class AppRoutingModule { } 

Код конструктора абонентское увольняет и когда страница Войти хит, и при успешном происходит аутентификация.

Я понимаю, что такая проблема возникает, когда UserService определен как в компоненте, так и в модуле, но в моем случае модуль является единственным местом, где это определено.

Answer 1

Решение было найдено в следующем StackOverflow:

Angular2 router.navigate refresh page

Это привело меня, чтобы проверить его в Internet Explorer, который работал нормально (он не работал в Chrome)

Оказалась, что вся страница была освежающая, когда следующая строка была выполнена:

this.router.navigate([this.returnUrl]); 

Который причиняли обслуживание пользователей снова перезагружать, потому что без типа на кнопке, действие Chrome по умолчанию было лечить нажмите кнопку «Отправить».

Исправление было добавить тип = «кнопка» тег на кнопку для входа в HTML

<button type="button" class="btn btn-primary"(click)="validateUser(username, password)">Login</button> 

Он теперь работает во всех браузерах.

Answer 2

Не знаю, как это выглядит, как сейчас, но в Angular2 rc.4 я мог бы использовать этот подход:

bootstrap.ts

import {AppComponent} from './components/AppComponent; 
import { singletonServiceNr1, singletonServiceNr2) from './services/Services; 

let singletonServices = [ 
    singletonServiceNr1, 
    singletonServiceNr2 
]; 

bootstrap(AppComponent, [singletonServices]); 

Чем вы впрыснуть singletonServiceNr1 или singletonServiceNr2 в нужном компоненте в обычный способ. Сейчас они одиночные.

---

В вашем случае вы должны Propably делать то же самое:

@NgModule({ 
declarations: [ 
AppComponent, 
LoginComponent, 
HomeComponent, 
ManageUsersComponent, 
StandingDataComponent 
], 
imports: [ 
BrowserModule, 
FormsModule, 
HttpModule, 
AppRoutingModule 
], 
providers: [AuthGuard,UserService], 
bootstrap: [AppComponent, UserService]  // note the change here 
}) 
export class AppModule { }