it-swarm.com.ru

Привязка свойства атрибута для URL фонового изображения в Angular 2

Я изо всех сил пытался выяснить лучший способ динамического изменения атрибута 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>`.

Как указано в исходном редактировании, решение также может быть достигнуто с помощью класса Renderer в Angular 2. Я еще не сделал этого, но думаю, что должен быть способ с setElementStyles или что-то в этом роде. Я постараюсь опубликовать пример, но мне бы очень хотелось, если бы кто-то еще показал мне (и другим), как это сделать.

18
pingo

Я думаю, что вы должны использовать что-то вроде этого:

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

где image - это свойство вашего компонента.

Смотрите этот вопрос:

41
Thierry Templier

Вам не нужно использовать NgStyle. Вы также можете сделать это:

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

Подробнее на Как добавить background-image используя ngStyle (angular2)?

16
redfox05

Основная причина очень проста: вы объявили глобальную переменную как blankImage, но в своем шаблоне вы ввели изображение. вот две разные переменные 

ваш код ts **blankImage**: string = '../assets/.../camera.png';

код вашего шаблона **<div class="profile-image" [ngStyle]="{'background-image': 'url(' + **image** + ')'}"></div>.`

просто измените изображение на blankImage или наоборот

1
Tanvir Alam