Angular2路由器和導航

Question

我面臨有關angular2路由的一個問題。 這是我的package.json，具有最新版本的angular 2.0.0-rc.4。

當我使用example.com/admin/login打開網址時，它的工作原理並顯示登錄頁面。 那沒問題。 然后，我將正確的電子郵件和密碼填寫在dashboad上。

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中放置了我的第一個“路由器出口”。 現在使用該URL登錄，例如：example.com/admin/login。 一切正常。

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”功能。 在此功能中，我將頁面重定向到儀表板上，但是頁面使用此網址“ example.com/admin/dashboard？”重新加載。 為什么是“？” 在網址末尾連接？ 為什么會出現此問題？

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

這是因為您正在創建admin組件的子級路由，因此它將采用直到admin作為基本路徑的路徑，並在其中追加或連接其他路徑...

這就是為什么當您重定向儀表板上的頁面時，頁面會使用此網址“ example.com/admin/dashboard重新加載

這就是你想要的:)