角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类：

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，路由器重定向到正确的成分，但是当它是一个下载，我得到这个错误：在链接的href明确输入时，而不是通过属性绑定

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

这个URL工作正常。任何想法如何弥补这一点？

Answer 1

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

另外删除routerLink添加到李元素，这是由于事件冒泡被激发的router.navigate函数。

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

要不就得从控制器在新标签中使用window.open(path)一个click事件&通话功能，和开放路径。它会自动下载文件。