Як відкрити посилання в новій вкладці за допомогою angular?

84

У мене є компонент angular 5, який повинен відкрити посилання в новій вкладці, я спробував наступне:

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

коли я відкриваю посилання, програма стає повільною і відкриває такий маршрут, як:

localhost:4200/www.example.com

Моє запитання: Який правильний спосіб зробити це в кутовому режимі?

— AlejoDev
джерело

3

Це працює для мене<a href="https://example.com" target="_blank">page link</a>

— М Мансур

Ви можете просто використати<a [href]="'www.example.com'" target="_blank">Link</a>

— тренер

121

Використовуйте window.open(). Це досить просто!

У вашому component.htmlфайлі-

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

У вашому component.tsфайлі-

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

— Гарунур Рашид
джерело

Хтось може вказати на спосіб зробити це, коли рядок у функції goToLink не є "магічним рядком"? Наприклад, через змінну?

— Брайан Аллан Вест

@BrianAllanWest Я б просто встановив змінну у відповідному файлі компонента і залишив параметр у html. Якщо це не спрацює, просто прив’яжіть його до шаблону за допомогою властивості прив’язки за замовчуванням [], і тоді ви зможете запустити будь-яку логіку, яка вам потрібна. .html goToLink () .ts goToLink () {window.open (Ваша змінна тут, "_blank")}

— thenolin

Як я можу дозволити це бути у маленькому спливаючому вікні та прослухати зміни в його URL-адресі.

— Mostafa Al Belliehy

Я додав би href='', так що це все ще виглядає клікабельним

— Леонардо Рік

Може використовуватися без _blank . За замовчуванням відкривається нова вкладка.

— Юрій Мататов

36

просто використовуйте повну URL-адресу як href так:

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

— жимін
джерело

11

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

та у вашому Component.ts

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

— Джон Ентоні Ромуальдо
джерело

для мене це працює лише без "//"

— Ніколас

1

Якщо використання "//" + siteUrl, тоді https: // або http: // слід зафіксувати в siteUrl, можливо це спричинило проблему для вас @Nicolas

— Boštjan Pišler

10

У app-routing.modules.tsфайлі:

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

У component.htmlфайлі:

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

— Феміна
джерело

8

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

На вашому шаблоні

<a (click)="openNewTab()" >page link</a>

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

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

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

— пішов
джерело

5

Спробуйте це:

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

Не потрібно використовувати '_blank'. window.openза замовчуванням відкриває посилання на новій вкладці.

— ДІНЕШ Адхікарі
джерело

1

Чому він повинен це спробувати? Що це робить?

— Андреас

1

це відповідь на це запитання "Як відкрити посилання в новій вкладці в кутовому 5". відкрити за замовчуванням відкрити посилання в новій вкладці

— DINESH Adhikari

5

Просто додайте target="_blank"до

<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
джерело

2

Деякий браузер може блокувати спливаюче вікно, створене 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();
  }

— Морло Мбакоп
джерело

0

Ви можете спробувати прив'язати властивість ні до якого маршруту

у вашому компоненті.ts user:any = 'linkABC';

у вашому компоненті.html <a target="_blank" href="yourtab/{{user}}">new tab </a>

— jdcreativemaker
джерело