Tengo un componente angular 5 que necesita abrir un enlace en una nueva pestaña, probé lo siguiente:
<a href="www.example.com" target="_blank">page link</a>cuando abro el enlace, la aplicación se vuelve lenta y abre una ruta como:
localhost:4200/www.example.comMi pregunta es: ¿Cuál es la forma correcta de hacer esto en angular?
puedes agregar https en tu código y funciona para mí
goToLink(url: string) { window.open('https://' + url, "_blank"); }Algunos navegadores pueden bloquear la ventana emergente creada por window.open(url, "_blank"); . Una alternativa es crear un enlace y hacer clic en él.
... 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(); }puedes intentar vincular la propiedad con la ruta
en su componente.ts user:any = 'linkABC' ;
en su componente.html <a target="_blank" href="yourtab/{{user}}">new tab </a>
<a [routerLink]="" (click)="openSite(SiteUrl)">{{SiteUrl}}</a>y en su Component.ts
openSite(siteUrl) { window.open("//" + siteUrl, '_blank'); }Acabo de descubrir una forma alternativa de abrir una nueva pestaña con el enrutador.
En tu plantilla,
<a (click)="openNewTab()" >page link</a> Y en su componente.ts, puede usar serializeUrl para convertir la ruta en una cadena, que se puede usar con window.open()
openNewTab() { const url = this.router.serializeUrl( this.router.createUrlTree(['/example']) ); window.open(url, '_blank'); }Simplemente agregue target="_blank" al
<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>En el app-routing.modules.ts :
{ path: 'hero/:id', component: HeroComponent } En el archivo component.html :
target="_blank" [routerLink]="['/hero', '/sachin']"Prueba esto:
window.open(this.url+'/create-account') No es necesario usar '_blank' . window.open por defecto abre un enlace en una nueva pestaña.
simplemente use la URL completa como href de esta manera:
<a href="https://www.example.com/" target="_blank">page link</a>Usa window.open() . ¡Es bastante sencillo!
En su archivo component.html
<a (click)="goToLink('www.example.com')">page link</a> En su archivo component.ts
goToLink(url: string){ window.open(url, "_blank"); }