如何使用 Angular 路由禁用 url 更改

Question

我的 Angular 7 应用程序需要在 iFrame 中呈现。由于系统的特殊性，我需要防止 URL 发生变化，或者我应该说我需要 Angular 而不是期望 URL 发生变化。

我找到了展示如何在特定路由调用中阻止它的帖子，但 URL 也会在应用加载时更新。

objective 是维护 URL 如：网站。com/applicaition，即使路由发生变化，window.location 也没有更新。

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

谢谢，韦恩

Answer 1

如果您根本不想 URL 更新，您需要做两件事。

首先，添加：

{ initialNavigation: false }

路由器设置如下：

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

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

很遗憾，我找不到全局更新的方法，因此您需要为应用中的每个导航点设置以下内容。

使用路由器链接：

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

使用 ts 导航调用：

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

（参考：https://angular.io/api/router/NavigationExtras）

希望对您有所帮助！

Answer 2

更好的方法是在根路由（或通配符）上实施路由保护，它总是 returns false。

@NgModule({
  imports: [
    RouterModule.forRoot([
      {
        path: '**',
        canActivate: [NeverActivate]
      }
    ])
  ],
  providers: [NeverActivate, UserToken, Permissions]
})


@Injectable()
class NeverActivate implements CanActivate {

  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean>|Promise<boolean>|boolean {
    return false; // never allow activation
  }
}

如何使用 Angular 路由禁用 url 更改

How to disable url changes with Angular routing

angular-routing

angular

angular7