Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

2.5K
Vistas
¿Cómo abrir un enlace en una nueva pestaña usando angular?

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.com

Mi pregunta es: ¿Cuál es la forma correcta de hacer esto en angular?

over 4 years ago · Santiago Trujillo
10 Respuestas
Responde la pregunta

0

puedes agregar https en tu código y funciona para mí

 goToLink(url: string) { window.open('https://' + url, "_blank"); }
over 4 years ago · Santiago Trujillo Denunciar

0

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(); }
over 4 years ago · Santiago Trujillo Denunciar

0

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>

over 4 years ago · Santiago Trujillo Denunciar

0

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

y en su Component.ts

 openSite(siteUrl) { window.open("//" + siteUrl, '_blank'); }
over 4 years ago · Santiago Trujillo Denunciar

0

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'); }
over 4 years ago · Santiago Trujillo Denunciar

0

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>
over 4 years ago · Santiago Trujillo Denunciar

0

En el app-routing.modules.ts :

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

En el archivo component.html :

 target="_blank" [routerLink]="['/hero', '/sachin']"
over 4 years ago · Santiago Trujillo Denunciar

0

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.

over 4 years ago · Santiago Trujillo Denunciar

0

simplemente use la URL completa como href de esta manera:

 <a href="https://www.example.com/" target="_blank">page link</a>
over 4 years ago · Santiago Trujillo Denunciar

0

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"); }
over 4 years ago · Santiago Trujillo Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda