Question

我有以下类的数组：

export class Ref {
    constructor(
        private id: number,
        private image: string,
        private title: string,
        private descript: string,
        private url: string,
        private urlType: string,
    ) { }
}

在我的html我称之为：

<div class="row">
    <div class="col-sm-3" *ngFor="let r of ref">
        <a [href]="r.url" [target]="r.urlType" class="reforms-1">
            <img class="refimg" [src]="r.image" alt="">
            <span class="reftitle"><h4>{{r.title}}</h4></span>
            <span class="refline">&nbsp;</span>
            <p>
                {{r.description}}
            </p>
        </a>
    </div>
</div>

除了<a>之外，一切运作良好。我有url类型，有时_blank有时_self等等。所以，有时它会是路由器链接，有时是外部链接（这就是为什么我不是使用routerLink）。

当我点击链接时，它会在_blank _self的新页面中完整回发，但是当它{{1}时浏览器正在回复同一页面。

我怎样才能纠正这个错误？

Answer 1

使用属性数据绑定：

<a [href]="r.url" [attr.data-target]="r.urlType" class="reforms-1">

这应该有用。

Answer 2

您需要使用routerLink。普通<a href="...">由浏览器处理，而不是由Angular处理。

<div class="row">
    <div class="col-sm-3" *ngFor="let r of ref">
        <a *ngIf="r.urlType !== 'routerLink'" [href]="r.url" [target]="r.urlType" class="reforms-1">
            <img class="refimg" [src]="r.image" alt="">
            <span class="reftitle"><h4>{{r.title}}</h4></span>
            <span class="refline">&nbsp;</span>
            <p>
                {{r.description}}
            </p>
        </a>
        <a *ngIf="r.urlType == 'routerLink'" [routerLink]="r.url"> ... </a>
    </div>
</div>

角度2一个href目标

2 个答案: