각도 2 - 외부 URL로 리디렉션하고 새 탭에서 엽니다.

각도 2 - 외부 URL로 리디렉션하고 새 탭에서 엽니다.

사용자가 링크를 클릭하면 새 페이지를 열려고 합니다.Angular 2 Router는 외부 URL로 리디렉션할 수 있는 기능이 없기 때문에 사용할 수 없습니다.

window.location을 사용하고 있습니다.href="...";

html 코드:

<button (click)="onNavigate()">Google</tn-submenu-link>

스크립트 코드 입력:

onNavigate(){
        //this.router.navigateByUrl("https://www.google.com");
        window.location.href="https://www.google.com";
    }

하지만 새 탭에서 어떻게 열 수 있습니까?window.location을 사용할 때.href?

onNavigate(){
    window.open("https://www.google.com", "_blank");
}

사용 시 주의해야 할 사항window.open()만약 당신이 그것에 전달한 URL이 없는 경우.http://아니면https://그 앞에서, 각진 것들은 그것을 경로로 취급합니다.

이 문제를 해결하려면 URL이 다음으로 시작하는지 테스트합니다.http://아니면https://그렇지 않으면 추가합니다.

let url: string = '';
if (!/^http[s]?:\/\//.test(this.urlToOpen)) {
    url += 'http://';
}

url += this.urlToOpen;
window.open(url, '_blank');

HTML:

<a class="main-item" (click)="onNavigate()">Go to URL</a>

오어

<button class="main-item" (click)="onNavigate()">Go to URL</button>

TS 파일:

onNavigate(){
    // your logic here.... like set the url 
    const url = 'https://www.google.com';
    window.open(url, '_blank');
}

또 다른 가능한 해결책은 다음과 같습니다.

const link = document.createElement('a');
link.target = '_blank';
link.href = 'https://www.google.es';
link.setAttribute('visibility', 'hidden');
link.click();

이 문제를 보다 전역적으로 해결하기 위해 다음과 같은 지침을 사용하는 다른 방법이 있습니다.

import { Directive, HostListener, ElementRef } from "@angular/core";

@Directive({
  selector: "[hrefExternalUrl]"
})
export class HrefExternalUrlDirective {
  constructor(elementRef: ElementRef) {}

  @HostListener("click", ["$event"])
  onClick(event: MouseEvent) {
    event.preventDefault();

    let url: string = (<any>event.currentTarget).getAttribute("href");

    if (url && url.indexOf("http") === -1) {
      url = `//${url}`;
    }

    window.open(url, "_blank");
  }
}

이렇게 사용하는 것만큼 간단합니다.

<a [href]="url" hrefExternalUrl> Link </a>

그리고 당신의 모듈에 있는 지시를 선언하는 것을 잊지 마세요.

당신이 URL에 절대적인 부분이 있다면 한가지 해결책을 더 공유하고 싶습니다.

쉐어포인트 솔루션:${_spPageContextInfo.webAbsoluteUrl}

HTML:

<button (click)="onNavigate()">Google</button>

스크립트 입력:

onNavigate()
{
    let link = `${_spPageContextInfo.webAbsoluteUrl}/SiteAssets/Pages/help.aspx#/help`;
    window.open(link, "_blank");
}

그리고 url은 new 탭에서 열립니다.

당신은 당신의 타이프스크립트 코드에서 이렇게 할 수 있습니다.

onNavigate(){
var location="https://google.com",
}

html 코드에 앵커 태그를 추가하고 해당 변수(위치)를 전달합니다.

<a href="{{location}}" target="_blank">Redirect Location</a>

이런 URL이 있다고 가정합니다.www.google.com없이.http지정된 URL로 리디렉션되지 않은 다음 추가합니다.http://에게location이것처럼.

var location = 'http://'+ www.google.com

var url = "https://yourURL.com";
var win = window.open(url, '_blank');
    win.opener = null;
    win.focus();

그러면 문제가 해결됩니다. 여기서는 DomSanitizer를 사용할 필요가 없습니다.내가 할 수 있는 일입니다.

target = blank를 사용하여 새 탭을 열 수 있습니다.

 <a href="https://www.google.co.in/" target="blank">click Here </a>

언급URL : https://stackoverflow.com/questions/42775017/angular-2-redirect-to-an-external-url-and-open-in-a-new-tab