У меня есть компонент angular 5, которому нужно открыть ссылку в новой вкладке, я пробовал следующее:

page link

когда я открываю ссылку, приложение замедляется и открывает маршрут вроде:

localhost:4200/www.example.com

Мой вопрос: Как правильно сделать это в angular?

AlejoDev

Ответов: 10

Ответы (10)

{{SiteUrl}}

и в вашем Component.ts

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

В файле app-routing.modules.ts:

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

В файле component.html:

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

Используйте window.open (). Это довольно просто!

В вашем component.html файле -

page link

В вашем component.ts файле -

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

вы можете попробовать привязать свойство к маршруту

в вашем component.ts пользователь: any = 'linkABC';

в вашем component.html новая вкладка

Попробуйте это:

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

No need to use '_blank'. window.open by default opens a link in a new tab.

вы можете добавить https в свой код, и это работает для меня

goToLink(url: string) {
    window.open('https://' + url, "_blank");
}

Просто добавьте target = "_ blank" к


    Open in New Window

просто используйте полный URL как href, например:

page link

Некоторые браузеры могут блокировать всплывающие окна, созданные window.open (url, "_blank");. Альтернативный вариант - создать ссылку и щелкнуть по ней.

...

  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();
  }

Я только что обнаружил альтернативный способ открытия новой вкладки с помощью маршрутизатора.

On your template,

page link

А на вашем component.ts вы можете использовать serializeUrl для преобразования маршрута в строку, которую можно использовать с window.open ()

openNewTab() {
  const url = this.router.serializeUrl(
    this.router.createUrlTree(['/example'])
  );

  window.open(url, '_blank');
}

2022 WebDevInsider