TypeScript에서 router.navigate로 새 탭을 여는 방법

TypeScript에서 router.navigate로 새 탭을 여는 방법

다음 유형의 스크립트 코드는 항상 현재 브라우저 탭에서 열립니다.

navigate($data: menuItem, $event: JQueryEventObject) {
       //...
       let a = $event.currentTarget as HTMLAnchorElement;
       router.navigate(a.href);    
    }

새 탭에서 router.navig를 열려면 어떻게 해야 합니까? (즉, $event.ctrlKey가 참인 경우)

이것이 나의 해결책입니다.

const url = this.router.serializeUrl(this.router.createUrlTree(['/my/url/route'], { queryParams: { ...anyQueryParamsYouWantOrOmitThis } }));
window.open(url, '_blank');

이것은 # 해시(https://example.com/ #/users 등) 및 비 해시 URL과 함께 작동합니다.

openInNewTab(router: Router, namedRoute) {
    let newRelativeUrl = router.createUrlTree([namedRoute]);
    let baseUrl = window.location.href.replace(router.url, '');

    window.open(baseUrl + newRelativeUrl, '_blank');
}

네, @Daneille님께서 말씀하신 것처럼 듀랜달의 라우터 플러그인(내비게이션 기능)은 새로운 탭을 열 수 있는 방법을 제공하지 않기 때문에 당신이 알아서 처리해야 합니다.

그래서 당신이 언급한 대로 처리하는 것이 더 좋습니다.

if ($event.ctrlKey) { 
    window.open(url); 
}

이렇게 HTML 링크로 하는 것이 좋을 것 같습니다.

<a  style=" text-decoration: none;" [routerLink]="['your-path',param1,param2]" target="_blank"  >your label </a>

this.router.navigate([]).then((result) => {
  window.open(url, '_blank');
});

새 창에 대한 router.navigate(...) 대신 다음 방법을 사용합니다.

navigateNewWindow(router: Router, commands: any[]) {
    let baseUrl = window.location.href.replace(router.url, '');
    const url = new URL(commands.join("/"), baseUrl).href
    window.open(url, '_blank');
}

언급URL : https://stackoverflow.com/questions/41531244/how-to-open-a-new-tab-with-router-navigate-in-typescript