Jak otworzyć link w nowej karcie za pomocą kątowej?

84

Mam komponent kątowy 5, który musi otworzyć łącze w nowej karcie, wypróbowałem następujące rozwiązania:

<a href="www.example.com" target="_blank">page link</a>

kiedy otwieram łącze, aplikacja zwalnia i otwiera trasę taką jak:

localhost:4200/www.example.com

Moje pytanie brzmi: jaki jest właściwy sposób zrobienia tego w kątowym?

— AlejoDev
źródło

3

To działa dla mnie<a href="https://example.com" target="_blank">page link</a>

— M Mansour

Możesz po prostu użyć<a [href]="'www.example.com'" target="_blank">Link</a>

— Coach

122

Użyj window.open(). To całkiem proste!

W twoim component.htmlpliku-

<a (click)="goToLink("www.example.com")">page link</a>

W twoim component.tspliku-

goToLink(url: string){
    window.open(url, "_blank");
}

— Harunur Rashid
źródło

Czy ktoś może wskazać sposób na zrobienie tego, gdy ciąg w funkcji goToLink nie jest „magicznym ciągiem”? Na przykład za pomocą zmiennej?

— Brian Allan West,

@BrianAllanWest Po prostu ustawiłbym zmienną w odpowiednim pliku komponentu i zostawiłbym parametr w html. Jeśli to nie zadziała, po prostu połącz go z szablonem przy użyciu domyślnej właściwości wiązania [], a następnie możesz uruchomić dowolną logikę na tym. .html goToLink () .ts goToLink () {window.open (Twoja zmienna tutaj, "_blank")}

— thenolin

Jak mogę pozwolić mu znajdować się w małym wyskakującym okienku i słuchać zmian w jego adresie URL.

— Mostafa Al Belliehy

Dodałbym href='', więc nadal wygląda na klikalny

— Leonardo Rick

Można używać bez _blank . Domyślnie otwiera się nowa karta.

— Yury Matatov,

36

po prostu użyj pełnego adresu URL jako href w następujący sposób:

<a href="https://www.example.com/" target="_blank">page link</a>

— zhimin
źródło

11

<a [routerLink]="" (click)="openSite(SiteUrl)">{{SiteUrl}}</a>

i w Twoim Component.ts

openSite(siteUrl) {
   window.open("//" + siteUrl, '_blank');
}

— John Anthony Romualdo
źródło

dla mnie działa tylko bez "//"

— Nicolas

1

Jeśli używasz "//" + siteUrl, to https: // lub http: // powinno zostać zatwierdzone w siteUrl, być może to było przyczyną problemu @Nicolas

— Boštjan Pišler

10

W app-routing.modules.tspliku:

{
    path: 'hero/:id', component: HeroComponent
}

W component.htmlpliku:

target="_blank" [routerLink]="['/hero', '/sachin']"

— Femina
źródło

8

Właśnie odkryłem alternatywny sposób otwierania nowej karty w routerze.

Na swoim szablonie

<a (click)="openNewTab()" >page link</a>

W pliku component.ts możesz użyć serializeUrl, aby przekonwertować trasę na ciąg znaków, którego można używać z window.open()

openNewTab() {
  const url = this.router.serializeUrl(
    this.router.createUrlTree(['/example'])
  );

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

— Wentjun
źródło

5

Spróbuj tego:

 window.open(this.url+'/create-account')

Nie ma potrzeby używania '_blank'. window.opendomyślnie otwiera łącze w nowej karcie.

— DINESH Adhikari
źródło

1

Dlaczego miałby tego spróbować? Co to robi?

— Andreas

1

to jest odpowiedź na to pytanie "Jak otworzyć link w nowej karcie w oknie kątowym 5". domyślnie otwórz odnośnik w nowej zakładce

— DINESH Adhikari

5

Po prostu dodaj target="_blank"do

<a mat-raised-button target="_blank" [routerLink]="['/find-post/post', post.postID]"
    class="theme-btn bg-grey white-text mx-2 mb-2">
    Open in New Window
</a>

— C.Ikongo
źródło

2

Niektóre przeglądarki mogą blokować wyskakujące okienka utworzone przez window.open(url, "_blank");. Alternatywą jest utworzenie linku i kliknięcie go.

...

  constructor(@Inject(DOCUMENT) private document: Document) {}
...

  openNewWindow(): void {
    const link = this.document.createElement('a');
    link.target = '_blank';
    link.href = 'http://www.your-url.com';
    link.click();
    link.remove();
  }

— Morlo Mbakop
źródło

0

możesz spróbować powiązać właściwość z trasą

w twoim komponencie.ts user:any = 'linkABC';

w swoim komponencie.html <a target="_blank" href="yourtab/{{user}}">new tab </a>

— jdcreativemaker
źródło