如何使用Angular路由禁用URL更改 [英] How to disable url changes with Angular routing

问题描述

我的Angular 7应用需要在iFrame中呈现.由于系统的特殊性质，我需要防止URL更改，或者也许我应该说我需要Angular不要期望URL更改.

My Angular 7 app needs to be rendered in an iFrame. Due to the peculiar nature of the system, I need to prevent the URL from changing, or maybe I should say that I need Angular not to expect the URL to change.

我发现了一些帖子，展示了如何在特定的路由调用中阻止它，但是URL也会在应用加载时更新.

I've found posts that show how to prevent it on specific routing calls, but the URL is updated when the app loads too.

目标是维护URL，例如:website.com/applicaition，即使路由发生更改，使得window.location没有更新.

The objective is to maintain the URL like: website.com/applicaition, even when the route changes such that there is no update to the window.location.

https://website.com/application [每个视图都需要] https://website.com/application/home [任何视图都不需要]

https://website.com/application [desired for every view] https://website.com/application/home [NOT desired for ANY view]

谢谢， 韦恩

推荐答案

如果您根本不希望更新URL，则需要做两件事.

If you don't wish to have the URL updated, at all, you need to do two things.

首先，添加:

{ initialNavigation: false }

对于这样的路由器设置:

to the router settings like this:

const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: '**', component: HomeComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes, { initialNavigation: false })],
  exports: [RouterModule]
})

不幸的是，我找不到一种全局更新方式，因此您需要为应用程序中的每个导航点设置以下内容.

Unfortunately, I couldn't find a way to update this globally, so you will need to set the following for each navigation point in the app.

通过路由器链接:

<a routerLink="/home" routerLinkActive="active" skipLocationChange="true" >Home</a>

使用ts导航呼叫:

router.navigate(['/home'], { skipLocationChange: true });

(参考: https://angular.io/api/router/NavigationExtras )

我希望这会有所帮助！

这篇关于如何使用Angular路由禁用URL更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！