Angular 2:路由而不改变 URL [英] Angular 2 : routing without changing URL

问题描述

如何在不更改 URL 的情况下在 Angular 2 应用程序中进行路由?(这是因为该应用程序位于 Django 应用程序页面上的多个选项卡之一下，适合将 URL 保持不变.)

How can i route in an Angular 2 app without changing the URL? (this is because the app is located under one of several tabs on a page of a Django app, where it's suitable to leave the URL unchanged.)

目前我在 app.component.ts

@RouteConfig([
  {
    path: '/home',
    name: 'Home',
    component: HomeComponent,
    useAsDefault: true
  },
  {
    path: '/user/:id',
    name: 'UserDetail',
    component: UserDetailComponent
  }
])

在里面说HomeComponent，导航到用户页面使用以下内容

and inside say HomeComponent, navigation to a user page uses the following

this._router.navigate(['UserDetail', {id: id}]);

那么 URL 将类似于 http://localhost:8000/django_url/user/123

then the url will look like http://localhost:8000/django_url/user/123

当我在 Angular 2 应用程序中导航时，是否可以保持 url 不变?所以当用户在页面 user/123 上时，url 将保持 http://localhost:8000/django_url ?

is it possible to have the url unchanged when i navigate within the Angular 2 app? so the url will stay http://localhost:8000/django_url when a user is on page user/123 ?

谢谢！

推荐答案

更新

router.navigateByUrl("/team/33/user/11", { skipLocationChange: true });

<a [routerLink]="..." skipLocationChange>click me</a>

更新

有一个 PR 直接支持这个 https://github.com/angular/angular/拉/9608

There is a PR to support this directly https://github.com/angular/angular/pull/9608

相关问题

• https://github.com/angular/angular/issues/9579
• https://github.com/angular/angular/issues/9949

原创

您可以实现类似于 BrowserPlatformLocation 而不是调用 history.pushState(), history.replaceState(), history.back() 和 history.forward() 维护本地数组中的更改.

You can implement a custom PlatformLocation similar to BrowserPlatformLocation but instead of calling ot history.pushState(), history.replaceState(), history.back(), and history.forward() maintain the changes in a local array.

然后您可以通过提供类似的方式让 Angular 使用您的自定义实现

You can then make Angular use your custom implementation by providing it like

bootstrap(AppComponent, 
    [provide(PlatformLocation, {useClass: MyPlatformLocation})]);

这篇关于Angular 2:路由而不改变 URL的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！