角度 2 : 如何为内联样式设置@Input?

Question

我有一个需要显示随机值的组件，这些值将通过一些@Input绑定随机生成并通过模板推送。到目前为止一切顺利，但我似乎无法将@Input链接到样式图像 url，如下所示：

<a routerLink="{{nextLink}}" routerLinkActive="active" class="nav-link next" style="background: url('assets/images/{{nextBg}}');">

其中{{nextBg}}是一个带有扩展名的文件，例如next.jpg=>这就是我的目标。

我尝试使用[ngStyle]和[style.background-image]但没有运气。

这是我的代码：

import { Component, Input } from '@angular/core';
@Component({
moduleId: module.id,
selector: 'prev-next',
template: `
<nav class="prev-next-nav">
<a routerLink="{{prevLink}}" routerLinkActive="active" class="nav-link prev" style="background: url('assets/images/tesla.jpg');">
<span class="link-dir">Previous project</span>
<span class="link-title"><i class="icon icon-arrowright"></i>&nbsp;{{prevName}}</span>
</a>
<a routerLink="{{nextLink}}" routerLinkActive="active" class="nav-link next" style="background: url('assets/images/food.jpg');">
<span class="link-dir">Next project</span>
<span class="link-title">{{nextName}}&nbsp;<i class="icon icon-arrowright"></i></span>
</a>
</nav>
`
})
export class PrevNextComponent {
// Previous link inputs
@Input() prevBg: string;
@Input() prevName: string;
@Input() prevLink: string;
// Next link inputs
@Input() nextBg: string;
@Input() nextName: string;
@Input() nextLink: string;
}

Answer 1

使用[ngStyle]尝试以下操作：

<a routerLink="{{prevLink}}" routerLinkActive="active" class="nav-link prev" [ngStyle]="{'background-image': 'url(assets/images/' + prevBg + ')'}">
<span class="link-dir">Previous project</span>
<span class="link-title"><i class="icon icon-arrowright"></i>&nbsp;{{prevName}}</span>
</a>

或者，您可以利用 OnInit 生命周期挂钩来构建组件中引用@Input() prevBg: string;的 URL。

.HTML

<a routerLink="{{prevLink}}" routerLinkActive="active" class="nav-link prev" [ngStyle]="{'background-image': prevBgUrl}">
<span class="link-dir">Previous project</span>
<span class="link-title"><i class="icon icon-arrowright"></i>&nbsp;{{prevName}}</span>
</a>

TS

ngOnInit() {
this.nextBgUrl = `url(assets/images/${this.nextBg})`;
}

我创建了一个 plunker。如果您单击其中一个英雄，您将看到 placehold.it 图像正在div.foo中加载。您应该以相同的方式加载本地资产 URL。

希望对您有所帮助！