Angular 2中的条件路由

我的angular应用程序中有两个组件（主页和登录）。登录是默认页面，登录后我想导航到主页

我有一个app.router.ts，看起来像：-

import { LoginComponent } from './login/login.component';
import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { AppComponent } from './app.component'; 
import { HomeComponent } from './home/home.component'; 



export const router: Routes = [
    { path: '', redirectTo: 'login', pathMatch: 'full'},
    { path: 'home', component: HomeComponent},
    { path: 'login', component: LoginComponent}
];

export const routes: ModuleWithProviders = RouterModule.forRoot(router);

import { Component, OnInit } from '@angular/core';
import { NetworkService } from './../services/network.service';
import { Router } from '@angular/router';


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

  constructor(private networkservice : NetworkService, private router: Router) { 

  }

  ngOnInit() {
  }

  onSubmit(value:any){
        /*
            network call and if credentials match set variable in service to true;
        */
      this.networkservice._userloggedin = true;
      this.router.navigate(['/home']);

    }
    else{

    }  
  }

}

我有一个服务，看起来像：-

    import { Injectable } from '@angular/core';
    import 'rxjs/add/operator/map';
    import { Observable } from 'rxjs/Observable';
    import { Http, Response, Headers, RequestOptions } from '@angular/http';

@Injectable()
export class NetworkService {

  private _url: string = "http://localhost:4200/api/login";
  public _userloggedin: boolean = false;

  constructor(private _http:Http) {

   }

   login(data): Observable<Object> {

        let encoded_data = JSON.stringify(data);

        let headers = new Headers({ 'Content-Type': 'application/json;charset=utf-8' });
        let options = new RequestOptions({ headers: headers });


        return this._http.post(this._url, encoded_data, options)/*.map(
            (res: Response) => res.json() || {}
        )*/;

   }
}

最后，在我的主页组件中，我检查服务的“\u userloggedin”的值。基于此变量的值，我执行路由（如果为true，则显示主页，否则导航回“登录页面”）

问题在于，在home.component.ts中，\u userloggedin的值始终为“false”（这是默认值）

---

我想知道这是否是“基于条件的路由”的正确方法。如果是，则说明如何使其工作。

您可以使用CanActive Guards进行条件路由

---

您可以使用CanActive Guards进行条件路由

---

使用有角度的两个防护装置。它有两种方法，分别是

canActivate

和

canDeactivate

，在组件即将加载和组件即将离开或销毁时触发一个

您可以检查这些值，然后根据值，可以使用.navigate方法导航到其他页面

在这个链接上可以找到一个例子

---

高级概念->角度防护装置

利用角度2防护装置。它有两种方法，分别是

canActivate

和

canDeactivate

，在组件即将加载和组件即将离开或销毁时触发一个

您可以检查这些值，然后根据值，可以使用.navigate方法导航到其他页面

在这个链接上可以找到一个例子

---

高级概念->角度防护装置

以上答案的补充

是的，实现此功能的正确方法是使用角度路由防护

但问题的解决方案“问题在于home.component.ts中的， _userloggedin的值始终为“false”（这是默认值）。”的目的是将依赖关系“NetworkService”提供给一个公共模块（最好是应用程序模块），而不是提供给单个组件

---

如果没有在正确的位置提供服务，则在实施Route Guard时可能会遇到相同的问题。

除了上述答案之外

是的，实现此功能的正确方法是使用角度路由防护

但问题的解决方案“问题在于home.component.ts中的， _userloggedin的值始终为“false”（这是默认值）。”的目的是将依赖关系“NetworkService”提供给一个公共模块（最好是应用程序模块），而不是提供给单个组件

如果没有在正确的位置提供服务，那么在实现Route Guard时可能会遇到相同的问题

import { NetworkService } from './../services/network.service';
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css'],
  providers : [NetworkService]
})
export class HomeComponent implements OnInit {

  constructor(private networkservice : NetworkService,private router: Router) { }

  ngOnInit() {

    if(this.networkservice._userloggedin != true){
      this.router.navigate(['/login']);
    }

  }
}