升級到2.4.3角：路由redirectTo不起作用了

Question

既然我已經更新了我的角2包（至2.4.3版本），我發現redirectTo不起作用了。

這是我app.routing.ts：

import { ModuleWithProviders } from '@angular/core' 
import { Routes, RouterModule } from '@angular/router'; 

import { Features } from "./views/features/features.component"; 
import { Pricing } from "./views/pricing/pricing.component"; 
import { PricingFree } from "./views/pricing/free/pricing.free.component"; 
import { PricingPersonal } from "./views/pricing/personal/pricing.personal.component"; 
import { PricingMedium } from "./views/pricing/medium/pricing.medium.component"; 
import { PricingLarge } from "./views/pricing/large/pricing.large.component"; 
import { PricingEnterprise } from "./views/pricing/enterprise/pricing.enterprise.component"; 
import { AboutSite } from "./views/about-site/about-site.component"; 
import { AboutCompany } from "./views/about-company/about-company.component"; 
import { ContactUs } from "./views/contact-us/contact-us.component"; 
import { NoContent } from './views/no-content'; 

import { DataResolver } from './app.resolver'; 

const appRoutes: Routes = [ 
    { path: "features", component: Features }, 
    { path: "pricing", component: Pricing }, 
    { path: "pricing/free", component: PricingFree }, 
    { path: "pricing/personal", component: PricingPersonal }, 
    { path: "pricing/medium", component: PricingMedium }, 
    { path: "pricing/large", component: PricingLarge }, 
    { path: "pricing/enterprise", component: PricingEnterprise }, 
    { path: "about-site", component: AboutSite }, 
    { path: "about-company", component: AboutCompany }, 
    { path: "contact-us", component: ContactUs }, 

    // Redirects 
    { path: "", redirectTo: "/features", pathMatch: "full" }, 
    { path: "dashboard", redirectTo: "/dashboard/home", pathMatch: "full" }, 
    { path: "docs", redirectTo: "/docs/home", pathMatch: "full" }, 

    { path: '**', component: NoContent } 
]; 

export const appRouting: ModuleWithProviders = RouterModule.forRoot(appRoutes); 

例如，讓我們看看到儀表板，通常重定向到儀表板/家，我有它甚至工作沒有的前導斜槓（「儀表板/家「而不是‘/儀表板/家’），甚至沒有 pathMatch =」滿」。

這裏是我的dashboard.routing.ts：

import { ModuleWithProviders } from "@angular/core"; 
import { Routes, RouterModule } from "@angular/router"; 

import { Dashboard } from "./dashboard.component"; 
import { DashboardHome } from "./home/dashboard.home.component"; 
import { DashboardProjects } from "./projects/dashboard.projects.component"; 
import { DashboardProjectsDetail } from "./projects/detail/dashboard.projects-detail.component"; 
import { DashboardProjectsCreate } from "./projects/create/dashboard.projects-create.component"; 
import { DashboardProjectsUpdate } from "./projects/update/dashboard.projects-update.component"; 
import { DashboardJobs } from "./jobs/dashboard.jobs.component"; 
import { DashboardJobsDetail } from "./jobs/detail/dashboard.jobs-detail.component"; 
import { DashboardReports } from "./reports/dashboard.reports.component"; 
import { DashboardOrganizationInfo } from "./organization-info/dashboard.organization-info.component"; 

import { AuthGuard } from '../../helpers/auth-guard'; 

const dashboardRoutes: Routes = [ 
    { 
     path: "dashboard", component: Dashboard, canActivate: [AuthGuard], children: [ 
      { path: "home", component: DashboardHome, canActivateChild: [AuthGuard] }, 
      { path: "projects", component: DashboardProjects, canActivateChild: [AuthGuard] }, 
      { path: "projects/create", component: DashboardProjectsCreate, canActivateChild: [AuthGuard] }, 
      { path: "projects/detail/:id", component: DashboardProjectsDetail, canActivateChild: [AuthGuard] }, 
      { path: "projects/update/:id", component: DashboardProjectsUpdate, canActivateChild: [AuthGuard] }, 
      { path: "projects/update/:id/:version", component: DashboardProjectsUpdate, canActivateChild: [AuthGuard] }, 
      { path: "jobs", component: DashboardJobs, canActivateChild: [AuthGuard] }, 
      { path: "jobs/detail/:id", component: DashboardJobsDetail, canActivateChild: [AuthGuard] }, 
      { path: "reports", component: DashboardReports, canActivateChild: [AuthGuard] }, 
      { path: "organization-info", component: DashboardOrganizationInfo, canActivateChild: [AuthGuard] }   
     ] 
    } 
]; 

export const dashboardRouting: ModuleWithProviders = RouterModule.forChild(dashboardRoutes); 

我已經添加了appRouting在app.module.ts在進口：

import { appRouting } from './app.routing'; 
import { DashboardModule } from "./views/dashboard/dashboard.module"; 

@NgModule({ 
    imports: [ DashboardModule, appRouting ] 
    ... 
    }) 

我在儀表盤添加dashboardRouting .module.ts：

import { dashboardRouting } from "./dashboard.routing"; 

@NgModule({ 
    imports: [ dashboardRouting ] 
    ... 
    }) 

在控制檯中沒有錯誤，當我加載應用程序的第一次確實從localhost：3000重定向到localhost：3000 /功能足夠奇怪了。

我跟着角2個文檔，我沒有看到在他們的代碼和我的任何差異。

當我點擊一個routerLink到儀表板（<a routerLink="/dashboard">），或者當我在localhost：3000/dashboard url時刷新頁面時，它不起作用。

Answer 1

將app.routing中的重定向更改爲子路由的頂層（即，而不是/dashboard/home重定向到/dashboard）。然後在子路由添加一個空白的路線重定向到默認路由（即空白孩子添加路由到/home）

下面

見代碼（做docs類似的變化）：

app.routing路線

const appRoutes: Routes = [ 
    { path: "features", component: Features }, 
    { path: "pricing", component: Pricing }, 
    { path: "pricing/free", component: PricingFree }, 
    { path: "pricing/personal", component: PricingPersonal }, 
    { path: "pricing/medium", component: PricingMedium }, 
    { path: "pricing/large", component: PricingLarge }, 
    { path: "pricing/enterprise", component: PricingEnterprise }, 
    { path: "about-site", component: AboutSite }, 
    { path: "about-company", component: AboutCompany }, 
    { path: "contact-us", component: ContactUs }, 

    // Redirects 
    { path: "", redirectTo: "/features", pathMatch: "full" }, 

    // ==>> Redirect to '/dashboard' instead of '/dashboard/home' 
    { path: "dashboard", redirectTo: "/dashboard", pathMatch: "full" }, 

    // ==>> Redirect to '/docs' instead of '/docs/home' 
    { path: "docs", redirectTo: "/docs", pathMatch: "full" }, 

    { path: '**', component: NoContent } 
]; 

dashboard.routing路線

const dashboardRoutes: Routes = [ 
    { 
     path: "dashboard", component: Dashboard, canActivate: [AuthGuard], children: [ 
      // ==>> Add a blank child route redirect to '/home' child 
      { path: "", redirectTo: "home", pathMatch: "full" }, 
      { path: "home", component: DashboardHome, canActivateChild: [AuthGuard] }, 
      { path: "projects", component: DashboardProjects, canActivateChild: [AuthGuard] }, 
      { path: "projects/create", component: DashboardProjectsCreate, canActivateChild: [AuthGuard] }, 
      { path: "projects/detail/:id", component: DashboardProjectsDetail, canActivateChild: [AuthGuard] }, 
      { path: "projects/update/:id", component: DashboardProjectsUpdate, canActivateChild: [AuthGuard] }, 
      { path: "projects/update/:id/:version", component: DashboardProjectsUpdate, canActivateChild: [AuthGuard] }, 
      { path: "jobs", component: DashboardJobs, canActivateChild: [AuthGuard] }, 
      { path: "jobs/detail/:id", component: DashboardJobsDetail, canActivateChild: [AuthGuard] }, 
      { path: "reports", component: DashboardReports, canActivateChild: [AuthGuard] }, 
      { path: "organization-info", component: DashboardOrganizationInfo, canActivateChild: [AuthGuard] }   
     ] 
    } 
];