Как использовать директиву для внешней ссылки в angular?

Question

У меня есть приложение angular 8. И есть возможность ввести ссылку.

Но у вас есть два вида ссылок:

внутренняя и внешняя. с внешним я имею ввиду вне домена сайта. Например: http://www.ad.nl

Тогда, если пользователь нажимает на эту ссылку, его нужно перенаправить на другую вкладку с этой ссылкой.

Но вы также можете иметь внутренняя ссылка: вот так: http://localhost: 4200 / gezondheid / Measurement / actieindex

Но тогда ссылка должна открываться в той же вкладке.

I есть директива для этого:

@Directive({
  selector: '[appExternalLink]'
})

/**
 * This directive is responsible for checking if in Activity the link is a external link - then it wil open
 * in a seperate tab or is the link an internal(same domain) link, then it will open in the same tab
 */
export class ExternalLinkDirective {

  @HostBinding('attr.rel') relAttr = '';
  @HostBinding('attr.target') targetAttr = '';
  @HostBinding('attr.href') hrefAttr = '';
  @Input() href: string;

  /**
   * Check if liink is external or not
   */
  ngOnChanges() {
    this.hrefAttr = this.href;

    if (this.isLinkExternal()) {
      this.relAttr = 'noopener';
      this.targetAttr = '_blank';
    }
  }

  /**
   * if link is external, then set the rel and target attributes
   */
  private isLinkExternal() {
    return !this.href.includes(location.hostname);
  }

, и я вставляю ее в компонент следующим образом:

 <a appExternalLink
      *ngIf="activity.link; else nolink"
      [href]="activity.link">
      <div class="todo-day-part-subject">{{ activity.subject }}</div>
      <div class="todo-day-part-block">
        <div class="todo-day-part-icon {{ getIcon(activity.type) }}"></div>
        <div class="todo-day-part-content">
          <div class="todo-day-part-text">{{ activity.text }}</div>
          <div class="todo-day-part-time">{{ activity.beginDate | date: 'HH:mm' }}</div>
          <div *ngIf="activity.link" class="todo-day-part-readmore">Bekijk</div>
          <div *ngIf="activity.state === 'Done'" class="todo-day-part-status-signal">
            <span class="fa fa-check-circle"></span>
          </div>
        </div>
      </div>
    </a>

Но сейчас это работает для внутренней ссылки. Но если ссылка: http://www.ad.nl, то она откроется в той же вкладке, а не в отдельной вкладке.

Так что мне нужно изменить?

Спасибо вы

Answer 1

Ну, во-первых, с внутренней ссылкой, я думаю, вы не имеете в виду ссылку, которая находится внутри приложения angular, потому что для этого вы должны использовать [routerLink]. Если это просто другая страница вне приложения angular, но внутри того же домена, я считаю, что вы должны сделать следующее:

@Directive({
  selector: 'a[appExternalLink]'
})
export class ExternalLinkDirective {

  @HostBinding('rel')
  rel = '';

  @HostBinding('target')
  target = '_self';

  @Input()
  @HostBinding('href')
  href?: string;

  ngOnChanges(changes: SimpleChanges) {
    if (changes.href) {
      const isExternal = this.isLinkExternal();
      this.rel = isExternal ? 'noopener' : '';
      this.target = isExternal ? '_blank' : '_self';
    }
  }

  /**
   * Check if link is external or not
   */
  private isLinkExternal() {
    return !(this.href || '').includes(location.hostname);
  }
}

Это означает, что не следует использовать привязку attr. потому что в этом случае это не сработает :) Вам нужно обновить свойство, а не только атрибут.

stackblitz

Answer 2

Я создал простой пример того, как еще можно решить эту задачу

Идея состоит в том, чтобы предотвратить поведение тегов ссылок по умолчанию и разрешить маршрутизацию с помощью javascript.

Кроме того, вам не нужно знать о типе ссылки при каждом запуске ngOnChanges. Таким образом, вы можете проверить это только по событию клика и принять решение, куда направить вашего клиента.