[英]Upgrade to Angular 2.4.3: routing redirectTo doesn't work anymore
因为我已经更新了我的angular 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);
例如,让我们看一下通常重定向到仪表板/主页的仪表板,即使没有前导斜杠(“ dashboard / home”而不是“ / dashboard / home”),甚至没有 pathMatch =“ full”,我都可以正常工作。
这是我的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);
我在进口的app.module.ts中添加了appRouting:
import { appRouting } from './app.routing';
import { DashboardModule } from "./views/dashboard/dashboard.module";
@NgModule({
imports: [ DashboardModule, appRouting ]
...
})
我在dashboard.module.ts中添加了dashboardRouting:
import { dashboardRouting } from "./dashboard.routing";
@NgModule({
imports: [ dashboardRouting ]
...
})
在控制台中没有错误,当我第一次加载应用程序时,它确实确实从localhost:3000重定向到localhost:3000 /功能,这很奇怪。
我关注了Angular 2文档,但看不到它们的代码和我的任何区别。
当我单击指向仪表板的routerLink( <a routerLink="/dashboard">
)时,或者当我位于localhost:3000 / dashboard url时刷新页面时,此方法均<a routerLink="/dashboard">
。
将app.routing
的重定向更改为子路由的顶层(即,而不是/dashboard/home
重定向为/dashboard
)。 然后在子路由中添加空白路由重定向到默认路由(即,将空白子路由添加到/home
)
请参见下面的代码( 对 docs
做类似更改 ):
应用路由
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 }
];
仪表板路线
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] }
]
}
];
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.