ボタンのコンポーネント内で新しいページを開く方法angular2をクリックしますか？

Question

dashboard.component.tsは私がangular2に新しいです、と私は、ログインページを設計していますルート

import { NgModule }    from '@angular/core'; 
import { BrowserModule }  from '@angular/platform-browser'; 
import { FormsModule }   from '@angular/forms'; 
import {Router} from '@angular/router'; 
import { HttpModule, JsonpModule } from '@angular/http'; 
import { RouterModule, Routes } from '@angular/router'; 
import { AppComponent }   from './app.component'; 
import { LoginFormComponent } from './login-form.component'; 
import { DashboardComponent } from './dashboard.component'; 
const appRoutes: Routes = [ 
    { path: 'dashboard', component: DashboardComponent }, 
]; 
@NgModule({ 
    imports: [ 
    BrowserModule, 
    FormsModule, 
    HttpModule, 
    JsonpModule, 
    RouterModule.forRoot(appRoutes) 
    ], 
    declarations: [ 
    AppComponent, 
    LoginFormComponent, 
    DashboardComponent 
    ], 
    bootstrap: [ AppComponent ] 
}) 
export class AppModule { } 

を定義している

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

import { Login } from './login'; 

@Component({ 
    moduleId: module.id, 
    selector: 'dashboard', 
    templateUrl: './dashboard.html', 
    template : '<router-outlet></router-outlet>' 
}) 

export class DashboardComponent { 

} 

module.tsファイル。ここで、[送信]ボタンをクリックした後、ユーザーが適切に認証されると、新しいページを開きます。どうすればいいですか？以下はlogin.component.tsファイルです。おかげ 更新されたコード

import { Injectable } from '@angular/core'; 
    import {Router} from '@angular/router'; 
    import {Http, Headers, Response,RequestOptions} from '@angular/http'; 
    import { Component } from '@angular/core'; 
    import 'rxjs/add/operator/map'; 
    import 'rxjs/add/operator/catch'; 
    import {Observable} from 'rxjs/Rx'; 
    import { Login } from './login'; 
    @Component({ 
     moduleId: module.id, 
     selector: 'login-form', 
     templateUrl: './login-form.component.html', 
    }) 

    export class LoginFormComponent { 
     constructor (private http: Http,private _router:Router) {} 
     data = { 
      'email': '', 
       'password': '' 
     }; 
     formSubmit (body: Object): Observable<Login[]>{ 
      let bodyString = JSON.stringify(body); 
      let headers  = new Headers({ 'Content-Type': 'application/x-www-form-urlencoded' }); // ... Set content type to JSON 
      let options  = new RequestOptions({ headers: headers }); 
      var params = "username=" + this.data.email + "&password=" + this.data.password; 
      var resp = this.http.post("http://localhost:8000/login", params, options) // ...using post request 
          .subscribe((res:Response) => { 
           if(res.json().status_code == 200) 
           { 
                  this._router.navigate(["../dashboard"]); 
            console.log("success"); 
           } 
           }); 
          return;           
    } 
    } 

Answer 1

使用

constructor (private http: Http,private _router:Router) {} 

if(res.json().status_code == 200) 
{ 
this._router.navigate(["../Dashboard"]); 
} 

これはルートに定義され、ダッシュボードにユーザーをリダイレクトします。

あなたはもっと知りたい場合は、次のダッシュボードから

const appRoutes: Routes = [ 
    { path: 'dashbaord', component: DashboardComponent } 
]; 

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