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

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

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>`.

至于 说
在原来的编辑，一个解决方案也可以与实现渲染的角度2.我还没有做到这一点，但认为应该有一个办法类setElementStyles或类似的东西。我将尝试举一个例子，但是如果有人向我（和其他人）展示了如何做，我会很乐意。