どのように私は、CSS Angularjs2

Question

home.component.css

#first-example { 
    margin-top: 20%; 
    /*parallax_image_path not working*/ 
    background-image: url({{parallax_image_path}}); 
} 

home.component.html

<div class="main_container"> 

    <div class="main_content"> 
    <h2>Coming Soon</h2> 
    </div> 

    <div parallax id="first-example"></div> 

</div> 

home.component.ts

import {Component} from "@angular/core"; 
/** 
* Created by sai on 3/7/17. 
*/ 
@Component({ 
    selector: "home", 
    templateUrl: './home.component.html', 
    styleUrls: ['./home.component.css'] 
}) 
export class Home { 
    parallax_image_path = '/assets/website_background.jpg' 
} 

Answer 1

だけ呼び出しからコンポーネント変数にアクセスすることができます変数は角度属性にする必要があります。

角度1では、値の中にng-srcまたはsrcの幅の中括弧を使用できます。角度2では、私たちは、このようにそれを行うことができます。

<img [src]="parallax_image_path">

Answer 2

それはuがやろうとしているものだ場合は、home.component.cssからアクセスすることはできませんが、あなたが使用して同じ効果を得ることができます[ngStyle ]角度指示。

import { Component, OnInit, Input } from '@angular/core'; 
 
import { DomSanitizer, SafeStyle } from '@angular/platform-browser'; 
 

 
@Component({ 
 
    selector: 'my-component', 
 
    templateUrl: './my-component.component.html', 
 
    styleUrls: ['./my-component.component.scss'] 
 
}) 
 

 
export class MyComponent implements OnInit { 
 

 
    private backgroundImg: SafeStyle; 
 
    @Input() myObject: any; 
 

 
    constructor(private sanitizer: DomSanitizer) {} 
 

 
    ngOnInit() { 
 
    this.backgroundImg = this.sanitizer.bypassSecurityTrustStyle('url(' + this.myObject.ImageUrl + ')'); 
 
    } 
 

 
}

<div [style.background-image]="backgroundImg"></div>