Question

我正在尝试使用angular 2创建一个应用程序，这是我的模板：

<div class="cover_user_profile"
       [style.backgroundImage]="model.cover ? url(model.cover) : url('client/img/profile_user/test.png') ">
</div>

我认为angular2认为url（）是一个函数并抛出错误......这个问题的解决方案是什么？

Answer 1

[]符号需要expressions，它会尝试评估url('kgfdgf')，因此会出错。

[style.background-color]是可能的绑定，[style.background-image]不是（PLUNKER）

更新：

这是消毒css的副作用。请参阅github issue和this以及this。

解决方法： PLUNKER

QuentinFchx提到使用管道

的解决方法

import {DomSanitizationService} from '@angular/platform-browser';
@Pipe({name: 'safe'})
export class SafePipe {
    constructor(sanitizer:DomSanitizationService){
        this.sanitizer = sanitizer;
    }

    transform(style) {
        return this.sanitizer.bypassSecurityTrustStyle(style);
    }
}

用法：<div [style.transform]="'rotate(7deg)' | safe"> asdf </div>

替代方案： PLUNKER

 [ngStyle]="{'background-image': 'url(' + (model.cover || 'client/img/profile_user/test.png') + ')'}"

Answer 2

您可以使用此有效表达式：

url

事实上，{{1}}不是一种方法，而是需要在最终字符串中出现的特定于CSS的内容。

角度2中的样式绑定backgrounImage抛出错误

2 个答案: