Question

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

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

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

我尝试使用[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。如果您点击其中一个英雄，您将看到正在加载div.foo的placehold.it图像。您应该以相同的说法加载本地资产URL。

希望这有帮助！

Angular 2：如何为内联样式设置@Input？

1 个答案: