Angular 2中背景图像url的属性属性绑定答案

【问题标题】：Attribute property binding for background-image url in Angular 2Angular 2中背景图像url的属性属性绑定
【发布时间】：2016-10-01 08:00:57
【问题描述】：

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

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

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; }
  }

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

编辑：

我原来的[ngStyle] 声明有不必要的大括号（ngStyle 是一个可以接受变量的指令），并且在url() 和image 周围缺少字符串标签。正确的方法是（如下回答）是：

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

正如在原始编辑中的陈述，也可以使用 Angular 2 中的 Renderer 类来实现解决方案。我还没有这样做，但认为应该有一种使用 setElementStyles 的方法或类似的东西。我会尝试发布一个示例，但如果其他人暂时向我（和其他人）展示如何操作，我会很高兴。

【问题讨论】：

标签： css angular typescript angular-directive

【解决方案1】：

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

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

其中image 是您的组件的属性。

看到这个问题：

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

【讨论】：

感谢您的回复！我试过你的建议（最后有一个额外的大括号，图像没有渲染：/。也试过这个但没有运气：<div class="profile-image" [ngStyle]="{ 'background-image': 'url(' + {{image}} + ')'}">
这与我如何定义image 有关吗？您的示例（加上额外的大括号）不会导致任何错误，但图像仍然无法呈现：/。我也尝试将blankImage 放入其中（在本地定义而不是通过可观察对象定义），但结果相同。 @蒂埃里
Nvm，让它工作。我引用的 blankImage 路径中有一些空格，因此导致了问题。
尝试编辑您的回复以添加额外的大括号，但不是 6 个字符（最少需要）。请编辑，以便我接受！谢谢！
另见stackoverflow.com/questions/37076867/…

【解决方案2】：

您不需要使用NgStyle。你也可以这样做：

[style.background-image]="'url(' + image + ')'"

在How to add background-image using ngStyle (angular2)?查看更多信息

【讨论】：

太棒了！真的很简单的方法。谢谢。
@moreirapontocom 很高兴它有帮助，即使在我写这篇文章 3 年后：D
太棒了！正在寻找这个。

【解决方案3】：

主要原因很简单，您将全局变量声明为blankImage，但在模板中您调用了image 而不是blankImage。

你的ts代码变量blankImage

blankImage: string = '../assets/.../camera.png';

你的模板代码变量image

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

【讨论】：

【解决方案4】：

错了

我认为你应该补充：

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

问候

【讨论】：

RHS 部分已经包含一个表达式，您正在向其中添加另一个表达式 {{image}}。这将触发错误。