Angular 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://перед нею, angular розглядає це як маршрут.

Щоб обійти це, перевірте, чи починається URL-адреса з http://або, https://і додайте його, якщо ні.

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

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

Іншим можливим рішенням є:

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

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

Я хочу поділитися з вами ще одним рішенням, якщо у вас є абсолютна частина в URL-адресі

Рішення SharePoint з ${_spPageContextInfo.webAbsoluteUrl}

HTML:

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

TypeScript:

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

і url буде відкрито в новій вкладці.

Ви можете зробити це у своєму коді машинопису

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. Це працює для мене

Щоб вирішити це питання більш глобально, ось ще один спосіб використання директиви :

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>

і не забудьте оголосити директиву у своєму модулі.

ми можемо використовувати target = blank для відкриття в новій вкладці

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