如何使用 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/applicition，即使路由发生变化，导致 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 }

路由器设置如下:

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 导航调用:

With ts navigation calls:

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

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

我希望这会有所帮助！

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