angular 2 路由器混合应用程序:url 导航后返回
angular 2 router hybrid app: url reverts back after navigate
每次路由更改都会呈现正确的组件,但路径有问题。
例如,从 /items 导航到 /add-item 会更改 url 一秒钟,然后将其还原。
它发生在每一页上,无论从哪里开始,到哪里去。
导航
<a routerLink="/add-item">Add item</a>
主要app.routes.ts
export const appRoutes: Routes = [{
path: 'brokers',
pathMatch: 'full',
redirectTo: '/'
},
{
path: 'sellers',
pathMatch: 'full',
redirectTo: '/'
},
{
path: 'buyers',
pathMatch: 'full',
redirectTo: '/'
},
{
data: { name: 'pageNotFound' },
path: '**',
redirectTo: '/404'
}];
home.routes.ts
export const homeRoutes: Routes = [{
component: HomePageComponent,
data: { name: 'homePage' },
path: ''
}
页面不-found.routes.ts
export const pageNotFoundRoutes: Routes = [{
component: PageNotFoundComponent,
data: { name: 'pageNotFound' },
path: '404'
}]
加-item.routes.ts
export const addItemRoutes: Routes = [{
component: AddItemComponent,
data: { name: 'addItem' },
path: 'add-item'
}]
items.routes.ts
export const itemsRoutes: Routes = [{
component: ItemsComponent,
data: { name: 'items' },
path: 'items'
}];
所有模块的路由都在导入部分这样声明
RouterModule.forChild(addItemRoutes)
主要路线
RouterModule.forRoot(appRoutes, { enableTracing: true })
路由器跟踪没有给我任何错误,并且在 NavigationEnd 事件上更正了 urlAfterRedirects。
仅供遇到相同问题的任何人使用。
如果你有 AngularJS 到 Angular 的混合应用,你必须保留旧的 $locationProvider 设置,比如 $locationProvider.html5Mode({ enabled: true, requireBase: false });
否则你的新 Angular 路由会遇到这个问题。
或者你可以关闭 Angular.js 使用这样的 hack 的路由操作
$provide.decorator('$browser', ['$delegate', ($delegate) => {
$delegate.onUrlChange = () => {};
$delegate.url = () => {
return '';
};
return $delegate;
}]);
每次路由更改都会呈现正确的组件,但路径有问题。
例如,从 /items 导航到 /add-item 会更改 url 一秒钟,然后将其还原。
它发生在每一页上,无论从哪里开始,到哪里去。
导航
<a routerLink="/add-item">Add item</a>
主要app.routes.ts
export const appRoutes: Routes = [{
path: 'brokers',
pathMatch: 'full',
redirectTo: '/'
},
{
path: 'sellers',
pathMatch: 'full',
redirectTo: '/'
},
{
path: 'buyers',
pathMatch: 'full',
redirectTo: '/'
},
{
data: { name: 'pageNotFound' },
path: '**',
redirectTo: '/404'
}];
home.routes.ts
export const homeRoutes: Routes = [{
component: HomePageComponent,
data: { name: 'homePage' },
path: ''
}
页面不-found.routes.ts
export const pageNotFoundRoutes: Routes = [{
component: PageNotFoundComponent,
data: { name: 'pageNotFound' },
path: '404'
}]
加-item.routes.ts
export const addItemRoutes: Routes = [{
component: AddItemComponent,
data: { name: 'addItem' },
path: 'add-item'
}]
items.routes.ts
export const itemsRoutes: Routes = [{
component: ItemsComponent,
data: { name: 'items' },
path: 'items'
}];
所有模块的路由都在导入部分这样声明
RouterModule.forChild(addItemRoutes)
主要路线
RouterModule.forRoot(appRoutes, { enableTracing: true })
路由器跟踪没有给我任何错误,并且在 NavigationEnd 事件上更正了 urlAfterRedirects。
仅供遇到相同问题的任何人使用。
如果你有 AngularJS 到 Angular 的混合应用,你必须保留旧的 $locationProvider 设置,比如 $locationProvider.html5Mode({ enabled: true, requireBase: false });
否则你的新 Angular 路由会遇到这个问题。
或者你可以关闭 Angular.js 使用这样的 hack 的路由操作
$provide.decorator('$browser', ['$delegate', ($delegate) => {
$delegate.onUrlChange = () => {};
$delegate.url = () => {
return '';
};
return $delegate;
}]);