角度2路由器混合应用程序:导航后,网址会还原

时间:2018-10-26 15:47:46

标签: angular angular2-routing angular-router

每条路线更改都会呈现正确的组件,但是路径存在问题。
例如,从/ 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: ''
}

page-not-found.routes.ts

export const pageNotFoundRoutes: Routes = [{
    component: PageNotFoundComponent,
    data: { name: 'pageNotFound' },
    path: '404'
}]

add-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。

1 个答案:

答案 0 :(得分:1)

只有遇到相同问题的人。
如果您将AngularJS与Angular应用程序混合使用,则必须保留旧的$ locationProvider设置,例如$locationProvider.html5Mode({ enabled: true, requireBase: false });
否则,您的新Angular路由将解决此问题。

或者您可以通过这种方法关闭Angular.js路由操作

$provide.decorator('$browser', ['$delegate', ($delegate) => {

    $delegate.onUrlChange = () => {};
    $delegate.url = () => {

        return '';

    };

    return $delegate;

}]);