Question

我正面临有关angular2路由的一个问题。这是我的package.json，最新版本的角度为2.0.0-rc.4。

当我使用example.com/admin/login打开我的网址时，它正在工作并向我显示登录页面。那没问题。然后我填写了正确的电子邮件和密码，它在仪表板上也是如此。

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

我已经把我的第一个＆＃34;路由器插座＆＃34;在app.component.ts中。现在使用以下网址登录：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];

填写正确的用户凭据并点击＆＃34;登录＆＃34;按钮我的＆＃34; checklogin＆＃34;功能会调用。在此功能中，我将我的页面重定向到仪表板，但页面使用此URL＆＃34; example.com/admin/dashboard重新加载？＆＃34;。为什么＆＃34;？＆＃34;在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

这是因为您正在制作管理组件的子路由，因此它将路径直到admin作为基本路径并追加或连接其中的其他路径...

这就是为什么当您在仪表板上重定向页面时，页面会使用此URL重新加载＆＃34; example.com/admin/dashboard

这就是你要找的东西：）

Angular2路由器和导航

1 个答案: