Question

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

我有一个 app.router.ts ，如下所示： -

def scrape_places

我有服务，如下所示： -

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);

在我的登录组件中，我有一个与提交按钮连接的方法，该方法调用后端api进行登录。登录组件如下所示： -

    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() || {}
        )*/;

   }
}

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

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{

    }  
  }

}

问题是在home.component.ts中， _userloggedin的值始终为“false”（这是默认值）。

我想知道这是否是做“基于条件的路由”的正确方法。如果是，我该如何让它运作。

Answer 1

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

https://angular.io/docs/ts/latest/api/router/index/CanActivate-interface.html

Angular2: Global Guard (user has to be logged in always)

Answer 2

使用Angular 2 Guards。它有两个方法canActivate和canDeactivate，当组件即将加载时以及组件即将被丢弃或销毁时，它会触发一个方法。

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

可以在此链接上找到一个示例

https://rahulrsingh09.github.io/AngularConcepts

高级概念 - ＆gt;角度卫兵

Answer 3

除上述答案外。

是的，实现此功能的正确方法是使用Angular Route Guards。

但解决问题的方法“问题在于home.component.ts， _userloggedin的值总是“false”（这是默认值）。“，是将依赖”NetworkService“提供到一个公共模块（最好的宫殿是App模块），而不是单独的组件。

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

Angular 2中的条件路由

3 个答案: