Я изо всех сил пытался выяснить лучший способ динамического изменения атрибута background-image в ряде компонентов Angular 2.
В следующем примере я @Input установить для background-image of div значение @Input с [ngStyle] директивы [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 или что-то в этом роде. Я постараюсь опубликовать пример, но мне бы очень понравилось, если бы кто-то еще показал мне (и другим), как это сделать в данный момент.