セレクターに設定されたプロパティを受け取るコンポーネントを作成しました。
<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場合、ルーターは正しいコンポーネントにリダイレクトしますが、ダウンロードの場合、次のエラーが発生します。
例外：キャッチされていません（約束されています）：エラー：どのルートにも一致しません。URLセグメント： 'style-guide / https％3A / somedomain.com / somefile.zip'
このURLは、リンクのhrefに明示的に入力されている場合は正常に機能しますが、プロパティバインディングを介しては機能しません。これを改善する方法はありますか？
ファイルをダウンロードする外部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]
コメントを追加