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


81

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?


3
Esto funciona para mí<a href="https://example.com" target="_blank">page link</a>
M Mansour

Podrías usarlo<a [href]="'www.example.com'" target="_blank">Link</a>
Entrenador

Respuestas:


115

Utilice window.open(). ¡Es bastante sencillo!

En su component.htmlarchivo

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

En su component.tsarchivo

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

¿Alguien puede señalar una forma de hacer esto donde la cadena dentro de la función goToLink no es una 'cadena mágica'? Por ejemplo, ¿a través de una variable?
Brian Allan West

@BrianAllanWest Simplemente establecería una variable en el archivo de componente correspondiente y dejaría el parámetro en el html. Si esto no funciona, simplemente vincúlelo a la plantilla usando la propiedad de vinculación predeterminada [] y luego puede ejecutar la lógica que desee en eso. .html goToLink () .ts goToLink () {window.open (Your Variable Here, "_blank")}
thenolin

¿Cómo puedo dejarlo en una pequeña ventana emergente y escuchar los cambios en su URL?
Mostafa Al Belliehy

Agregaría un href='', para que parezca que se puede hacer clic
Leonardo Rick

Puede usarse sin _blank . De forma predeterminada, se abre una nueva pestaña.
Yury Matatov

35

simplemente use la URL completa como href así:

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

9

En el app-routing.modules.tsarchivo:

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

En el component.htmlarchivo:

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

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

y en su Component.ts

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

7

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 component.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');
}

5

Prueba esto:

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

No es necesario usarlo '_blank'. window.openpor defecto abre un enlace en una nueva pestaña.


1
¿Por qué debería intentar eso? ¿Qué hace eso?
Andreas

1
esta es la respuesta de esta pregunta "¿Cómo abrir el enlace en una nueva pestaña en ángulo 5" window.open por abrir el enlace por defecto en una nueva pestaña
DINESH Adhikari

4

Solo 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>

2

Algunos navegadores pueden bloquear las ventanas emergentes creadas 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();
  }
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.