Angular 2 中背景图像 url 的属性属性绑定 [英] Attribute property binding for background-image url in Angular 2

问题描述

我一直在努力找出在许多 Angular 2 组件中动态更改 background-image 属性的最佳方法.

在以下示例中，我尝试使用 [ngStyle] 将 div 的 background-image 设置为 @Input 值指令:

import {Component, Input} from '@angular/core';从'../models'导入{用户}；//导出类型别名以加强类型安全(https://github.com/ngrx/example-app)导出类型 UserInput = User;@成分({选择器:'个人资料sidenav'，样式:[`.profile-image {背景重复:不重复；背景位置:50%；边界半径:50%；宽度:100px；高度:100px；}`]，模板:`<div class="profile-image" [ngStyle]="{'background-image': url({{image}})"><h3>{{用户名}}</h3>`})导出类 ProfileSidenav {@Input() 用户:用户输入；空白图像:字符串 = '../assets/.../camera.png';//利用getter"来保持哑"组件中的模板干净(https://github.com/ngrx/example-app)获取用户名(){返回 this.user.username;}获取图像(){if (!this.user.image) { 返回 this.cameraImage;} else { 返回 this.user.image;}}

我不认为问题出在 observable 上，因为 username 显示并执行类似 <img *ngIf="image" src="{{ image }}"> 渲染图像.我必须访问 background-image 属性，因为这显然是制作圆形图像的最佳方式，但总的来说，我想知道如何做到这一点.

我原来的 [ngStyle] 声明有不必要的大括号(ngStyle 是一个可以接受变量的指令)，并且在 url() 和 <代码>图像.正确的方法是(如下所述)是:

<div class="profile-image" [ngStyle]="{'background-image': 'url(' + image + ')'}"></div>`.

正如原始编辑中所述，也可以使用Renderer 类.我还没有这样做，但认为应该有一种使用 setElementStyles 或类似方法的方法.我会尝试发布一个示例，但如果其他人暂时向我(和其他人)展示了如何操作，我会很高兴.

解决方案

我认为你应该使用类似的东西:

其中 image 是组件的属性.

看到这个问题:

• 如何使用 ngStyle 添加背景图片 (angular2)?

I have been struggling to figure out the best way to dynamically change the background-image attribute in a number of Angular 2 components.

In the following example, I am attempting to set the background-image of a div to an @Input value using [ngStyle] directive:

import {Component, Input} from '@angular/core';
import { User } from '../models';

// exporting type aliases to enforce better type safety (https://github.com/ngrx/example-app)
export type UserInput = User;

@Component({
  selector: 'profile-sidenav',
  styles: [ `
    .profile-image {
      background-repeat: no-repeat;
      background-position: 50%;
      border-radius: 50%;
      width: 100px;
      height: 100px;
    }
  `],
  template: `  
    <div class="profile-image" [ngStyle]="{ 'background-image': url({{image}})">
    <h3>{{ username }}</h3>
  `
})

export class ProfileSidenav {
  @Input() user: UserInput;
  blankImage: string = '../assets/.../camera.png';

  // utilizing "getters" to keep templates clean in 'dumb' components (https://github.com/ngrx/example-app) 
  get username() {
    return this.user.username;
  }
  get image() {
    if (!this.user.image) { return this.cameraImage;
    } else { return this.user.image; }
  }

I don't think the issue is with the observable, since username displays and doing something like <img *ngIf="image" src="{{ image }}"> renders the image. I have to access the background-image attribute because apparently that is the best way to make a circular image, but in general would like to know how to do this.

EDIT:

My original [ngStyle] declaration had unnecessary curly brackets (ngStyle is a directive that can take a variable), and was missing string tags around url() and image. The correct way is (as answered below) is:

<div class="profile-image" [ngStyle]="{'background-image': 'url(' + image + ')'}"></div>`.

As stated in the original edit, a solution can also be achieved with the Renderer class in Angular 2. I have yet to do it but think there should be a way with setElementStylesor something like that. I will try to post an example but would love if someone else showed me (and others) how to for the time being.

解决方案

I think that you should use something like that:

<div class="profile-image"
     [ngStyle]="{ 'background-image': 'url(' + image + ')'}">

where image is a property of your component.

See this question:

• How to add background-image using ngStyle (angular2)?

这篇关于Angular 2 中背景图像 url 的属性属性绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！