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?
<a href="https://example.com" target="_blank">page link</a>
<a [href]="'www.example.com'" target="_blank">Link</a>
Odpowiedzi:
Użyj
window.open()
. To całkiem proste!W twoim
component.html
pliku-<a (click)="goToLink("www.example.com")">page link</a>
W twoim
component.ts
pliku-goToLink(url: string){ window.open(url, "_blank"); }
źródło
href=''
, więc nadal wygląda na klikalnypo 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>
źródło
<a [routerLink]="" (click)="openSite(SiteUrl)">{{SiteUrl}}</a>
i w Twoim Component.ts
openSite(siteUrl) { window.open("//" + siteUrl, '_blank'); }
źródło
W
app-routing.modules.ts
pliku:{ path: 'hero/:id', component: HeroComponent }
W
component.html
pliku:target="_blank" [routerLink]="['/hero', '/sachin']"
źródło
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'); }
źródło
Spróbuj tego:
window.open(this.url+'/create-account')
Nie ma potrzeby używania
'_blank'
.window.open
domyślnie otwiera łącze w nowej karcie.źródło
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>
źródło
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(); }
źródło
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>
źródło