Angular 2 个指向外部 URL 的链接被视为路由的相对路径

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 中设置输入 class:

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'

这个 URL 在 link 的 href 中显式输入但不是通过属性绑定时工作正常。知道如何解决这个问题吗？

Answer 1

您应该考虑创建一个锚标记，因为它似乎是要下载文件的外部 URL。而是删除 *ngIf 并且只有 *ngFor 的第一个元素没有 span 包装器。

另外删除添加到 li 元素的 routerLink，它会因为事件冒泡而触发 router.navigate 函数。

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

或者从控制器获得 click 事件和调用函数，并使用 window.open(path) 在新选项卡中打开路径。它会自动下载文件。

Angular 2 个指向外部 URL 的链接被视为路由的相对路径

Angular 2 Links To External URLs Treated As Relative Paths For Routing

javascript

angular

components

property-binding