Angular2サービスは、私は以下のサービスが定義されていシングルトン

Question

として注入されていませんホームルートに送信し、認証ガードは、新しいインスタンスであるため、認証されたユーザのために未定義を返すユーザサービスの新しいインスタンスを起動する

@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

は：

Angular2 router.navigate refresh page

これは、それをテストするために私を導きましたInternet Explorerは正常に動作しました（Chromeでは動作していません）

それは次の行が実行されたときにページ全体がリフレッシュされたことが判明：

ボタンを タイプせずに、Chromeのデフォルトのアクションは、治療のためにあったので、もう一度再ロードするために、ユーザーサービスを引き起こした

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

ボタンは送信としてクリックします。

修正は、それは今、すべてのブラウザで動作するHTML

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

でのログインボタンにタグタイプ=「ボタン」を追加することでした。

Answer 2

ない、それが今のように見えますが、Angular2のrc.4に、私はこのアプローチを使用することができるかを確認します。

bootstrap.tsあなたが所望の成分にsingletonServiceNr1、またはsingletonServiceNr2を注入たより

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

let singletonServices = [ 
    singletonServiceNr1, 
    singletonServiceNr2 
]; 

bootstrap(AppComponent, [singletonServices]); 

通常の方法。彼らは今シングルトンです。あなたのケースでは

---

あなたはpropably同じことを行う必要があります。解決策は以下のstackoverflowで見つけた

@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 { }