Angular 2中的外部链接被视为相对路径用于路由

Question

我已经创建了一个组件，该组件接收在其选择器上设置的属性：

<app-navigation-card
        label="My Label"
        description="Description of Item"
        type="download"
        [links]="[{path:'https://somedomain.com/somefile.zip', label:'Download'}]"
></app-navigation-card>

输入框是在NavigationCard类中设置的：

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-navigation-card',
  templateUrl: './navigation-card.component.html',
  styleUrls: ['./navigation-card.component.scss']
})
export class NavigationCardComponent implements OnInit {

  @Input() label: String;
  @Input() description: String;
  @Input() links: Object;
  @Input() type: String;

  constructor() { }

  ngOnInit() {
  }

}

在这个模板中：

<div class="label">{{label}}</div>
<div class="description">{{description}}</div>
<ul *ngIf="links != undefined" class="links">
  <li *ngFor="let link of links" [routerLink]="link.path">
    <span *ngIf="type == 'download'"><a href="{{link.path}}">{{link.label}}</a></span>
    <span *ngIf="type == 'navigation'" [routerLink]="link.path"><{{link.label}}</span>
    <div></div>
  </li>
</ul>

如果类型 == navigation，路由器将重定向到正确的组件，但当它是一个下载时，我会得到这个错误：

EXCEPTION: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'style-guide/https%3A/somedomain.com/somefile.zip'

当在链接的href中显式输入此URL时，它可以正常工作，但通过属性绑定就不行了。有任何想法如何解决？

- Eric

Answer 1

您应该考虑创建一个锚标签，因为它看起来是一个外部URL，将要下载一个文件。而不是删除*ngIf并仅使用没有span包装器的第一个元素*ngFor。

此外，请移除添加到li元素的routerLink，因为由于事件冒泡，它会触发router.navigate函数。

<li *ngFor="let link of links">
    <a [attr.href]="link.path">{{link.label}}</a>
</li>

或者在控制器中添加click事件并调用函数，使用window.open(path)在新标签页打开路径。这将自动下载文件。

- Pankaj Parkar

---

据我理解，这将绕过内部路由（SPA）的整个目的，实际上是对该URL的网站的新请求。 - Chris White

@ChrisWhite 这是一个特殊情况，路由器不应该意识到这个外部URL导航，因为我们使用了 href。 - Pankaj Parkar

Answer 2

你可以在变量之前添加https://。

<a [attr.href]="'https://' + link.path">{{link.label}}</a>

Angular 会将其识别为绝对路径，并将您重定向到该 URL。

- Nicolás Garitagoitia