Angular2ルータとナビゲート

Question

私はangular2ルーティングに関する1つの問題に直面しています。 最新のバージョン2.0.0-rc.4のpackage.jsonがあります。

example.com/admin/loginを使用してURLを開くと、そのログインページが表示されます。それは大丈夫です。それから、正しい電子メールとパスワードを入力して、ダッシュボードに同じパスワードを入力します。

package.json

{ 
    "name": "angular2-quickstart", 
    "version": "1.0.0", 
    "scripts": { 
    "lite": "lite-server", 
    "tsc": "tsc", 
    "tsc:w": "tsc -w", 
    "typings": "typings", 
    "start": "npm run tsc:w" 
    }, 
    "license": "ISC", 
    "dependencies": { 
    "@angular/common": "2.0.0-rc.4", 
    "@angular/compiler": "2.0.0-rc.4", 
    "@angular/core": "2.0.0-rc.4", 
    "@angular/forms": "0.2.0", 
    "@angular/http": "2.0.0-rc.4", 
    "@angular/platform-browser": "2.0.0-rc.4", 
    "@angular/platform-browser-dynamic": "2.0.0-rc.4", 
    "@angular/router": "^3.0.0-beta.2", 
    "@angular/router-deprecated": "2.0.0-rc.2", 
    "@angular/upgrade": "2.0.0-rc.4", 
    "angular2-cookie": "^1.2.2", 
    "angular2-in-memory-web-api": "0.0.14", 
    "bootstrap": "^3.3.6", 
    "core-js": "^2.4.0", 
    "reflect-metadata": "^0.1.3", 
    "rxjs": "5.0.0-beta.6", 
    "systemjs": "0.19.27", 
    "zone.js": "^0.6.12" 
    }, 
    "devDependencies": { 
    "concurrently": "^2.0.0", 
    "lite-server": "^2.2.0", 
    "typescript": "^1.8.10", 
    "typings": "^1.0.4" 
    } 
} 

私はapp.component.tsに私の最初の "ルータ・アウトレット" を入れています。 example.com/admin/loginのようにこのURLでログインしてください。それは正常に動作しています。ボタン "ログイン" 正しいユーザー資格情報をいっぱいにしてをクリックした後

app.component.ts

import { Component }   from '@angular/core'; 
import { ROUTER_DIRECTIVES, RouterOutlet } from '@angular/router'; 
import { CookieService } from 'angular2-cookie/core'; 

@Component({ 
    selector: 'admin-app', 
    template: ` 
    <router-outlet></router-outlet> 
    `, 
    directives: [ROUTER_DIRECTIVES, RouterOutlet], 
    providers: [CookieService], 
    precompile: [AppComponent] 
}) 
export class AppComponent { 
} 

login.route.ts

import { RouterConfig }   from '@angular/router'; 
import { LoginComponent }  from './components/login.component'; 
import { ForgotComponent }  from './components/forgot.component'; 
import { AuthGuard }  from './services/auth.guard'; 
import { AuthService }  from './services/auth.service'; 
import { CookieService } from 'angular2-cookie/core'; 

export const AuthRoutes: RouterConfig = [ 
    { path: 'login', component: LoginComponent }, 
    { path: 'forgot', component: ForgotComponent} 
]; 

export const AUTH_PROVIDERS = [AuthGuard, AuthService, CookieService]; 

私の "checklogin" に機能しますコール。この機能では、ダッシュボードに自分のページをリダイレクトしますが、このURLで「example.com/admin/dashboard？」というページがリロードされます。なぜ "？" URLの最後につながりますか？なぜこの問題が発生するのですか？

login.component.ts

import {Component, provide} from '@angular/core'; 
import { ROUTER_DIRECTIVES, Router } from '@angular/router'; 
import { FormBuilder, Validators, Control, ControlGroup, FORM_DIRECTIVES } from '@angular/common'; 
import 'rxjs/Rx'; 
import { CookieService } from 'angular2-cookie/core'; 

import { AdminFormValidator } from '../../common/validations/adminform.validator'; 
import { AuthService } from '../services/auth.service'; 

@Component({ 
    templateUrl: '/templates/admin/auth/login.html', 
    directives: [ROUTER_DIRECTIVES], 
    providers: [AuthService, CookieService], 
    precompile: [LoginComponent] 
}) 

export class LoginComponent { 

    form: ControlGroup; 
    email: Control; 
    password: Control; 
    getData: string; 

    constructor(private builder: FormBuilder, private _authService: AuthService, private _cookieService:CookieService, public router: Router) { 

     this.email = new Control("", Validators.compose([Validators.required, AdminFormValidator.checkEmail, AdminFormValidator.startsWithNumber])); 
     this.password = new Control("", Validators.compose([Validators.required])); 

     this.form = builder.group({ 
      email: this.email, 
      password: this.password 
     }); 
    } 

    checkLogin(){ 
     var submitData = this._authService.checkLogin(this.form.value); 
     console.log(this._authService.getLoginUserInfo()); 
     this.router.navigateByUrl('dashboard'); 
    } 
} 

admin.component.ts

import {Component} from '@angular/core'; 
import { Router, ROUTER_DIRECTIVES, RouterOutlet } from '@angular/router'; 

import { HeaderComponent } from './header.component'; 
import { LeftComponent } from './left.component'; 
import { FooterComponent } from './footer.component'; 

@Component({ 
    template: ` 
     <router-outlet></router-outlet> 
     `, 
    directives: [ROUTER_DIRECTIVES, RouterOutlet, HeaderComponent, LeftComponent, FooterComponent], 
    precompile: [AdminComponent] 
}) 
export class AdminComponent { 
    constructor() {} 
} 

dashboard.route.ts

import { RouterConfig }   from '@angular/router'; 
import { AuthGuard }   from './../auth/services/auth.guard'; 
import { AdminComponent }  from './../common/components/admin.component'; 
import { DashboardComponent }  from './components/dashboard.component'; 

export const DashboardRoutes: RouterConfig = [ 
    { path: '', component: AdminComponent, 
     children: [ 
      { path: '', component: DashboardComponent }, 
      { path: 'dashboard', component: DashboardComponent } 
     ] 
    } 
]; 

高度に感謝します。

Answer 1

それがベースパスとして管理までのパスを取り、その中にさらにパスを追加したりconcateますので、あなたが管理コンポーネントの子ルートを作っているので、これはuがリダイレクトなぜとき、これはある...

です「このURLとページのリロードダッシュボード上の自分のページには、これは 『ダッシュボード』（あなたはなぜあなたはthis.router.navigateByUrlを使用している、:)