Angular2 Router und navigieren

Question

Ich bin mit einem Problem in Bezug auf angular2 Routing konfrontiert. Hier ist mein Paket.json mit der neuesten Version von eckigen 2.0.0-rc.4.

Wenn ich meine URL mit example.com/admin/login öffne, funktioniert es und zeigt mir Login-Seite. Das ist ok. Dann füllte ich die richtige E-Mail und das Passwort es geht auf Dashboad mit dem gleichen.

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" 
    } 
} 

Ich habe meinen ersten "Router-Ausgang" in app.component.ts setzen. Melden Sie sich jetzt mit dieser URL an: example.com/admin/login. Es funktioniert gut.

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

Nach der korrekten Anmeldeinformationen des Benutzers und klicken Sie auf "Anmelden" Taste my "checklogin" Funktion gefüllt werden Anruf. In dieser Funktion leite ich meine Seite auf dem Dashboard um, aber die Seite wird mit dieser URL "example.com/admin/dashboard?" Neu geladen. Warum "?" bei der letzten URL einkalkulieren? Warum tritt dieses Problem auf?

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 } 
     ] 
    } 
]; 

Dank fortschrittlicher.

Answer 1

Dies ist, weil Sie ein Kind Route der Admin-Komponente machen so den Weg bis Admin als Basispfad nehmen und hängen oder den weiteren Weg darin concate ...

Aus diesem Grunde, wenn u umleiten Ihre Seite die Seite neu geladen mit dieser uRL auf Armaturenbrett „example.com/admin/dashboard

das ist, was Sie für :)