¿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?

html angular routes anchor AlejoDev
fuente
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");
}
Harunur Rashid
fuente
¿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>
zhimin
fuente
9

En el app-routing.modules.tsarchivo:

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

En el component.htmlarchivo:

target="_blank" [routerLink]="['/hero', '/sachin']"
Femina
fuente
8 
<a [routerLink]="" (click)="openSite(SiteUrl)">{{SiteUrl}}</a>

y en su Component.ts

openSite(siteUrl) {
   window.open("//" + siteUrl, '_blank');
}
Juan Antonio Romualdo
fuente
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');
}
fuejun
fuente
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.

DINESH Adhikari
fuente
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>
C.Ikongo
fuente
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();
  }
Morlo Mbakop
fuente