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