router.navigateBy 사용 방법Url 및 router.navigate in Angular

router.navigateBy 사용 방법Url 및 router.navigate in Angular

https://angular.io/api/router/RouterLink 은 Angular4에서 사용자를 다른 경로로 안내하는 링크를 만드는 방법에 대한 좋은 개요를 제공하지만, 사용자가 링크를 클릭해야 하는 대신 프로그래밍 방식으로 동일한 작업을 수행하는 방법을 찾을 수 없습니다.

Url별 탐색

routerLink다음과 같이 사용되는 지침:

<a [routerLink]="/inbox/33/messages/44">Open Message 44</a>

명령형 탐색을 사용하는 래퍼일 뿐입니다.router그리고 그것의 탐색By.URL 방법:

router.navigateByUrl('/inbox/33/messages/44')

출처에서 알 수 있듯이:

export class RouterLink {
  ...

  @HostListener('click')
  onClick(): boolean {
    ...
    this.router.navigateByUrl(this.urlTree, extras);
    return true;
  }

따라서 사용자를 다른 경로로 탐색해야 하는 경우에는 어디든 주입하면 됩니다.router및 사용navigateByUrl방법:

class MyComponent {
   constructor(router: Router) {
      this.router.navigateByUrl(...);
   }
}

항행

라우터에서 사용할 수 있는 다른 방법이 있습니다. 탐색:

router.navigate(['/inbox/33/messages/44'])

둘 사이의 차이

사용.router.navigateByUrl위치 표시줄을 직접 변경하는 것과 유사합니다. "전체" 새 URL을 제공합니다.반면에.router.navigate전달된 명령의 배열인 패치를 현재 URL에 적용하여 새 URL을 만듭니다.

차이를 명확하게 확인하려면 현재 URL이'/inbox/11/messages/22(popup:compose)'.

이 URL을 사용하여, 호출router.navigateByUrl('/inbox/33/messages/44')결과적으로'/inbox/33/messages/44'하지만 그것을 부르는 것은router.navigate(['/inbox/33/messages/44'])결과적으로'/inbox/33/messages/44(popup:compose)'.

공식 문서에서 더 읽어보십시오.

router.navigate vs router.navigateByUrl

router.navigate그것은 단지 마무리하는 편리한 방법입니다.router.navigateByUrl결론은 다음과 같습니다.

navigate(commands: any[], extras) {
    return router.navigateByUrl(router.createUrlTree(commands, extras), extras);
}

다른 답변에서 언급한 바와 같이router.navigateByUrl절대 URL만 사용할 수 있습니다.

// This will work
router.navigateByUrl("http://localhost/team/33/user/11")
// This WON'T work even though relativeTo parameter is in the signature
router.navigateByUrl("../22", {relativeTo: route})

모든 상대적 계산은 다음과 같이 수행됩니다.router.createUrlTree그리고.router.navigate배열 구문은 모든 배열 요소를 "명령"을 수정하는 URL로 처리하는 데 사용됩니다.예.".."올라가세요."path"내려가세요.{expand: true}쿼리 매개 변수 추가 등.다음과 같이 사용할 수 있습니다.

// create /team/33/user/11
router.navigate(['/team', 33, 'user', 11]);

// assuming the current url is `/team/33/user/11` and the route points to `user/11`

// navigate to /team/33/user/11/details
router.navigate(['details'], {relativeTo: route});

// navigate to /team/33/user/22
router.navigate(['../22'], {relativeTo: route});

// navigate to /team/44/user/22
router.navigate(['../../team/44/user/22'], {relativeTo: route});

그거{relativeTo: route}매개 변수는 라우터가 상대 작업의 루트로 사용할 매개 변수이므로 중요합니다.

구성 요소의 생성자를 통해 이 정보를 수행합니다.

  // In my-awesome.component.ts:

  constructor(private route: ActivatedRoute, private router: Router) {}
  
  // Example call
  onNavigateClick() {
    // Navigates to a parent component
    this.router.navigate([..], { relativeTo: this.route })
  }

routerLink 지시문

이 지침의 가장 좋은 점은 다음을 검색한다는 것입니다.ActivatedRoute널 위해서.이미 익숙한 후드 아래에서 사용됩니다.

router.navigateByUrl(router.createUrlTree(commands, { relativeTo: route }), { relativeTo: route });

다음 변형 모델은 동일한 결과를 생성합니다.

[routerLink]="['../..']"

// if the string parameter is passed it will be wrapped into an array
routerLink="../.."

제공된 답변 외에도 다음과 같은 세부 정보가 있습니다.navigate함수의 주석에서:

/**
 * Navigate based on the provided array of commands and a starting point.
 * If no starting route is provided, the navigation is absolute.
 *
 * Returns a promise that:
 * - resolves to 'true' when navigation succeeds,
 * - resolves to 'false' when navigation fails,
 * - is rejected when an error happens.
 *
 * ### Usage
 *
 * ```
 * router.navigate(['team', 33, 'user', 11], {relativeTo: route});
 *
 * // Navigate without updating the URL
 * router.navigate(['team', 33, 'user', 11], {relativeTo: route, skipLocationChange: true});
 * ```
 *
 * In opposite to `navigateByUrl`, `navigate` always takes a delta that is applied to the current
 * URL.
 */

라우터 안내서에는 프로그램 탐색에 대한 자세한 내용이 나와 있습니다.

제가 알기로는 router.navigate는 현재 경로로 상대적으로 탐색하는 데 사용됩니다.예를 들어 : 현재 경로가 abc.com/user, 이면 이 시나리오의 url : abc.com/user/10 로 이동하여 router.dll을 사용할 수 있습니다.

---

router.navigateByUrl()은 절대 경로 탐색에 사용됩니다.

즉,

이 경우 완전히 다른 경로로 이동해야 하는 경우 router.navigateByUrl을 사용할 수 있습니다.

예를 들어 abc.com/user 에서 abc.com/assets, 으로 이동해야 하는 경우 router.navigateByUrl()을 사용할 수 있습니다.

---

구문:

router.navigateByUrl('----String ----');

router.navigate([], {relativeTo:route})

http://localhost:4200에서 서버를 실행하고 http://localhost:4200/abc에 있으며 라우팅 모듈에서 경로를 다음과 같이 정의했다고 가정합니다.

const appRoutes: Routes = [
{ path: 'abc', component: MainComponent, children: [
    {path: '', component: InitialComponent},
    {path: 'new', component: LoadedComponent}
]}]

이제 @angular/router에서 아래와 같이 Router를 가져와서 생성자 내부의 변수(여기서는 myRoute)에 할당합니다.

import { Router } from '@angular/router';
constructor(private myRoute: Router) { }

이제 메서드 내에서 navigBy를 사용하여 리디렉션합니다.http://localhost:4200/abc에 있고 navigateBy를 사용하여 리디렉션하려는 경우를 의미하는 URLhttp://localhost:4200/abc/new의 URL. 즉, 먼저 appRoutes 구성과 일치하도록 시도하고 하위 항목에서 발견되면 LoadedComponent로 리디렉션됩니다.코드는 다음과 같습니다.

this.myRoute.navigateByUrl('abc/new');

또한 탐색을 사용하면 활성화된 경로를 기반으로 작동하며 현재 활성 경로에서는 거의 변경되지 않습니다.

import { ActivatedRoute, Router } from '@angular/router';
constructor(private myRoute: Router, private activeRoute: ActivatedRoute) { }

여기서 내가 http://localhost:4200/abc에 있을 때 새 경로로 탐색하는 메서드 호출이 있으면 현재 활성 경로를 기준으로 트리거되고 하위 경로로 새 경로가 있으면 http://localhost:4200/abc/new로 리디렉션됩니다.

this.myRoute.navigate(['new'], {relativeTo: this.activeRoute});

저도 같은 문제에 직면했습니다.내 솔루션:

...
<p @click=parseHTML v-html=data.html></p>
...
methods: {
  parseHTML(event) {
    if (event.target.href) {
      event.preventDefault();
      if (event.target.href.includes(location.hostname)) {
        this.$router.push(event.target.href)
      }
    }
  }
}

언급URL : https://stackoverflow.com/questions/45025334/how-to-use-router-navigatebyurl-and-router-navigate-in-angular