Góc 2: định tuyến mà không thay đổi URL

Question

Làm cách nào tôi có thể định tuyến trong ứng dụng Góc 2 mà không thay đổi URL? (Điều này là bởi vì các ứng dụng nằm dưới một trong số các tab trên một trang của một ứng dụng Django, nơi đó là thích hợp để rời khỏi URL không thay đổi.)

hiện tôi có một cái gì đó như thế này bên app.component.ts

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

và bên trong nói HomeComponent, chuyển hướng đến một trang người dùng sử dụng như sau

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

thì url sẽ trông giống như http://localhost:8000/django_url/user/123

có thể thay đổi url khi tôi điều hướng trong ứng dụng Angular 2 không? do đó, url sẽ ở lại http://localhost:8000/django_url khi người dùng ở trên trang user/123?

Cảm ơn!

Answer 1

Cập nhật

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

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

Cập nhật

Có một PR để hỗ trợ này trực tiếp https://github.com/angular/angular/pull/9608

vấn đề liên quan

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

gốc

Bạn có thể thực hiện một tùy chỉnh PlatformLocation tương tự như BrowserPlatformLocation nhưng thay vì gọi ot history.pushState(), history.replaceState(), history.back(), và history.forward() duy trì thay đổi trong một mảng địa phương.

Sau đó, bạn có thể tận dụng góc thực hiện tùy chỉnh của bạn bằng cách cung cấp nó như

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

Answer 2

Cuối cùng làm việc trong Angular2 phát hành cuối cùng. Bạn cần phải vượt qua {skipLocationChange: true} trong khi điều hướng đến đường dẫn ví dụ:

this.router.navigateByUrl('path', { skipLocationChange: true }); 

Answer 3

this.router.navigateByUrl('path', { skipLocationChange: true }); cũng làm việc cho tôi.

Trong Routes mảng Tôi cũng đã thêm con đường của tôi để nạp một thành phần như sau:

const appRoutes: Routes = [  
    { path: 'Account/MySchool', component: MySchoolComponent } 
]; 

Và trong file từ đó tôi cần phải thay thế các thành phần, khởi router đối tượng như dưới đây và gọi tại nơi yêu cầu

import { Router } from '@angular/router'; 

constructor(private router: Router) { } 


onSubmit() {   
    this._requestService.postPageOneData("Account/SavePageOneData", this.userProfile) 
     .subscribe((response) => { 
      if(response.status == 'success'){ 
        this.router.navigateByUrl('Account/PageTwoSelection', { skipLocationChange: true }); 
       } 
     }, this.handleErrorSubscribed); 
    }