Question

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

在以下示例中，我尝试使用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; }
  }

我认为问题不在于observable，因为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类来实现解决方案。我还没有这样做，但认为应该有一种方法{ {1}}或类似的东西。我会尝试发布一个例子，但如果有人向我（以及其他人）展示如何暂时如此，我会很高兴。

Answer 1

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

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

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

看到这个问题：

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

Answer 2

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

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

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

了解详情

Answer 3

主要原因很简单，您将全局变量声明为blankImage，但是在模板中键入了image。多数民众赞成在两个不同的变量

您的ts代码 **blankImage**: string = '../assets/.../camera.png';

您的模板代码 **<div class="profile-image" [ngStyle]="{'background-image': 'url(' + **image** + ')'}"></div>。`

只需将图像更改为blankImage即可，反之亦然

Answer 4

那是错的

我认为您应该添加：

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

致谢

Angular 2中背景图像URL的属性属性绑定

4 个答案: