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

埃里克

我创建了一个组件,该组件接收在其选择器上设置的属性:

<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>

如果输入type == navigation,则路由器将重定向到正确的组件,但是在下载时,出现此错误:

例外:未捕获(承诺):错误:无法匹配任何路由。网址段:“ style-guide / https%3A / somedomain.com / somefile.zip”

当在链接的href中显式输入但未通过属性绑定时,此URL可以正常工作。任何想法如何补救?

Pankaj Parkar

您应该考虑创建一个定位标记,因为它似乎是要下载文件的外部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)它将自动下载文件。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章