如何在锚点上有条件地使用[href]或[routerLink]？

Question

我需要同一个锚链接有条件地指向本地或外部资源。我试过了

<a [href]="outside?externalUrl:null"  [routerLink]="outside?[]:['/route',id]" >test</a>

但是不管用。我没有得到任何错误，但它指向同一个本地页面，忽略了外部URL。有什么想法吗？

另一种选择是构建链接，但我找不到任何文档如何在服务内部访问路由器链接

编辑：我知道我可以用*ngIf克隆整个链接，但我不想这样做，我的链接包含一个带有一系列选项的视频标签

Answer 1

您可以通过在指令中注入 RouterLinkWithHref 来访问 routerLink 实例。

指令:

import { ElementRef, Optional, Input, Directive, OnChanges } from '@angular/core';
import { RouterLinkWithHref } from '@angular/router';

@Directive({
  selector: '[externalLink]'
})
export class ExternalLinkDirective implements OnChanges {

  @Input() externalLink: string;

  constructor(
    private el: ElementRef,
    @Optional() private link: RouterLinkWithHref
  ) {}

  ngOnChanges(){

    if (!this.link || !this.externalLink) {
      return;
    }
    this.el.nativeElement.href=this.link.href=this.externalLink;

    // Replace onClick
    this.link.onClick = (...args: any[]) => {
      return true;
    }

  }

}

用法:

html prettyprint-override"><!-- Ignore router link and use external link -->
<a routerLink="/some/path" externalLink="https://google.com">Link</a>

Answer 2

对于条件href，在attr上前置。在href使用null值为我工作之前，就像这样:

[attr.href]="!item.subMenu ? item.url : null"

Answer 3

最简单的方法是使用 *ngIf / else：

<ng-container *ngIf="outside; else internalBlock">
  <a [href]="externalUrl">External</a>
</ng-container>

<ng-template #internalBlock>
  <a [routerLink]="['/route', id]">Internal</a>
</ng-template>

编辑#1:（丑陋的解决方案）

既然不想用< code>*ngIf(我还是不明白为什么)，可以这样做:

模板:

<a href="javascript:void(0)" (click)="handleClick(outside, '/route', id, externalUrl)">Link</a>

组成部分：

handleClick(outside: boolean, internalUrl: string, internalId: string, externalUrl: string): void {
  if (outside) {
    window.location.href = externalUrl;
    // You can also use Location class of Angular
  } else {
    this.router.navigate([`${internalUrl}/${internalId}`]);
  }
}