代码之家 › 专栏 › 技术社区 › jkyoutsey

如何使用@HostBinding将背景图像添加到角度2+指令?

angular2-hostbinding angular2-directives background-image angular

jkyoutsey · 技术社区 · 7 年前

@HostBinding .我知道我很接近,但当我检查它时,我看到了 background-image: none 在Chrome的检查员中。

import { Directive, HostBinding } from '@angular/core';
import { DomSanitizer, SafeStyle } from '@angular/platform-browser';

@Directive({
    selector: '[myDirectiveWithBackgroundImage]'
})
export class MyDirective {

    @HostBinding('style.background-image')
    public backgroundImage: SafeStyle;

    constructor(private sanitizer: DomSanitizer) {
        this.backgroundImage = this.sanitizer.bypassSecurityTrustStyle(
            'url(assets/images/favicon16.png) no-repeat scroll 7px 7px;'
    );
  }
}

/assets , ~/assets 等等…但是 background-image none

https://plnkr.co/edit/5w87jGVC7iZ7711x7qWV?p=preview

3 回复 | 直到 7 年前

Dharman TechyTech 4 年前

background-image 做 background-repeat 的 background-size 的 7px 7px background 对于 @HostBinding('style.background') 而不是 @HostBinding('style.background-image') 例如:

@HostBinding('style.background')
public background: SafeStyle;

constructor(private sanitizer: DomSanitizer) {
  this.background = this.sanitizer.bypassSecurityTrustStyle(
    'url("//ssl.gstatic.com/gb/images/i1_1967ca6a.png") no-repeat scroll 7px 7px'
  );
}

看到这个叉子了吗 plunker

WoutVC 2 年前

我设法让Hostbinding使用background image属性。

只要把 style 像这样在主机绑定内部 @HostBinding('style') backgroundImage: safeStyle; @HostBinding('style.background-image') backgroundImage: safeStyle;

@HostBinding('style') backgroundImage: safeStyle;

this.backgroundImage = this.sanitizer.bypassSecurityTrustStyle(`background-image: url('${url}')`);

Simon_Weaver 6 年前

@Alexander感谢您提供消毒剂代码。

有趣的是,我只看到在URL之后有额外参数时才有必要这样做。如果我只有一个URL,它可以工作,但一旦我添加了“left top”,就会出现以下错误:

推荐文章

Vida Khalili · 如何在Nextjs中设置背景图像?

2 年前

Laiqa Mohid · 反应-在使用SVG作为背景图像属性中的数据时,尝试将SVG填充颜色作为道具传递?

2 年前

user8076620 · javascript如何使用style属性查找包含背景图像的元素

6 年前

h2odev · 在具有动态宽度的div元素上调整背景图像

6 年前

Chris · 如何使用CSS缩放手机背景图像?

6 年前

Chris McCarthy · 如何在matplotlib雷达图中添加轮盘赌背景图像

6 年前

Fahim Parkar · UITextView背景图像正在滚动多行

6 年前

Polygami · 保持图像居中,同时保持100%的高度,仅延伸/裁剪侧面

6 年前

AlphaX · 如何交换透明背景图像

6 年前

TJ1 · 更改圆的背景图像

6 年前