Nice programing

Angular 2 : URL 변경없이 라우팅

nicepro 2020. 12. 12. 12:29
반응형

Angular 2 : URL 변경없이 라우팅


URL을 변경하지 않고 Angular 2 앱에서 라우팅하려면 어떻게해야합니까? (이는 앱이 Django 앱 페이지의 여러 탭 중 하나에 있기 때문에 URL을 변경하지 않는 것이 좋습니다.)

현재 나는 내부에 이와 같은 것이 있습니다 app.component.ts

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

내부 HomeComponent에서 사용자 페이지 탐색은 다음을 사용합니다.

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

그러면 URL은 다음과 같습니다. http://localhost:8000/django_url/user/123

Angular 2 앱 내에서 탐색 할 때 URL을 변경하지 않을 수 있습니까? http://localhost:8000/django_url사용자가 페이지에 있을 URL이 유지 user/123됩니까?

감사!


최신 정보

router.navigateByUrl("/team/33/user/11", { skipLocationChange: true });
<a [routerLink]="..." skipLocationChange>click me</a>

최신 정보

이것을 직접 지원하는 PR이 있습니다 https://github.com/angular/angular/pull/9608

관련 문제

실물

당신은 사용자 정의 구현할 수 있습니다 PlatformLocation유사 BrowserPlatformLocation 대신 해주 호출을 history.pushState(), history.replaceState(), history.back(), 및 history.forward()로컬 배열의 변경을 유지한다.

그런 다음 Angular가 다음과 같이 제공하여 사용자 정의 구현을 사용하도록 할 수 있습니다.

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

마지막으로 Angular2 최종 릴리스에서 작동합니다. 경로를 탐색하는 동안 {skipLocationChange : true}를 전달해야합니다.

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

this.router.navigateByUrl('path', { skipLocationChange: true }); 또한 나를 위해 일했습니다.

에서 Routes배열 또한 다음과 같은 구성 요소를로드 할 수 내 경로를 추가 :

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

그리고 거기에있는 파일에서 구성 요소를 교체하고 router아래와 같이 개체를 초기화 하고 필요한 장소에서 호출해야합니다.

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 );
    }

참고 URL : https://stackoverflow.com/questions/37054731/angular-2-routing-without-changing-url

반응형