web-dev-qa-db-ja.com

Angular 2の背景画像URLの属性プロパティバインディング

多くの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; }
  }

usernameが表示され、<img *ngIf="image" src="{{ image }}">のような何かをすると画像がレンダリングされるため、問題はobservableにあるとは思いません。 background-image属性にアクセスする必要があるのは、明らかにそれが円形の画像を作成する最良の方法だからです。しかし、一般にこれを行う方法を知りたいのです。

編集：

私の元の[ngStyle]宣言には不必要な中括弧があり（ngStyleは変数を取ることができるディレクティブです）、url()とimageの周りに文字列タグがありませんでした。正しい方法は以下のとおりです：

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

元の編集でstatedとして、解決策はAngularの-​​ Renderer クラスでも実現できます。 2.まだやっていませんが、setElementStylesまたはそのような方法があるはずです。私は例を投稿しようとしますが、他の誰かが私（および他の人）に当分の間どのようにすればよいかを示してくれれば幸いです。

cssangulartypescriptangular-directive
26
pingo

私はあなたがそのようなものを使うべきだと思います：

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

ここで、imageはコンポーネントのプロパティです。

この質問をご覧ください：

53
Thierry Templier

NgStyleを使用する必要はありません。これも行うことができます：

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

詳細は ngStyle（angular2）を使用して背景画像を追加する方法

23
redfox05

主な理由は、グローバル変数をblankImageとして宣言したが、テンプレートではimageを入力した非常に単純なためです。 thats 2つの異なる変数

あなたのtsコード**blankImage**: string = '../assets/.../camera.png';

テンプレートコード**<div class="profile-image" [ngStyle]="{'background-image': 'url(' + **image** + ')'}"></div>。 `

画像をblankImageまたはその逆に変更するだけです

1
Tanvir Alam