Ich habe eine eckige 5-Komponente, die einen Link in einem neuen Tab öffnen muss. Ich habe Folgendes versucht:
<a href="www.example.com" target="_blank">page link</a>
Wenn ich den Link öffne, wird die Anwendung langsam und öffnet eine Route wie:
localhost:4200/www.example.com
Meine Frage ist: Was ist der richtige Weg, dies im Winkel zu tun?
<a href="https://example.com" target="_blank">page link</a>
<a [href]="'www.example.com'" target="_blank">Link</a>
Antworten:
Verwenden Sie
window.open()
. Es ist ziemlich einfach!In Ihrer
component.html
Datei-<a (click)="goToLink("www.example.com")">page link</a>
In Ihrer
component.ts
Datei-goToLink(url: string){ window.open(url, "_blank"); }
quelle
href=''
, damit es immer noch anklickbar aussiehtVerwenden Sie einfach die vollständige URL wie folgt:
<a href="https://www.example.com/" target="_blank">page link</a>
quelle
In der
app-routing.modules.ts
Datei:{ path: 'hero/:id', component: HeroComponent }
In der
component.html
Datei:target="_blank" [routerLink]="['/hero', '/sachin']"
quelle
<a [routerLink]="" (click)="openSite(SiteUrl)">{{SiteUrl}}</a>
und in Ihrer Component.ts
openSite(siteUrl) { window.open("//" + siteUrl, '_blank'); }
quelle
Ich habe gerade eine alternative Möglichkeit gefunden, eine neue Registerkarte mit dem Router zu öffnen.
Auf Ihrer Vorlage,
<a (click)="openNewTab()" >page link</a>
Und auf Ihrer component.ts können Sie serializeUrl verwenden, um die Route in eine Zeichenfolge zu konvertieren, die mit verwendet werden kann
window.open()
openNewTab() { const url = this.router.serializeUrl( this.router.createUrlTree(['/example']) ); window.open(url, '_blank'); }
quelle
Versuche dies:
window.open(this.url+'/create-account')
Keine Notwendigkeit zu verwenden
'_blank'
.window.open
Standardmäßig wird ein Link in einer neuen Registerkarte geöffnet.quelle
Fügen Sie einfach
target="_blank"
auf die<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>
quelle
Einige Browser blockieren möglicherweise das von erstellte Popup
window.open(url, "_blank");
. Eine Alternative besteht darin, einen Link zu erstellen und darauf zu klicken.... 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(); }
quelle