[英]how can i access component variable from css Angularjs2
home.component.css主页.component.css
#first-example {
margin-top: 20%;
/*parallax_image_path not working*/
background-image: url({{parallax_image_path}});
}
home.component.html主页.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 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'
}
Just call the variable but you need to angular attribute.只需调用变量,但您需要 angular 属性。
In Angular 1, I believe we can use ng-src or src width curly braces inside the value.在 Angular 1 中,我相信我们可以在值内使用 ng-src 或 src 宽度大括号。 In angular 2, we can do it this way:
在 angular 2 中,我们可以这样做:
<img [src]="parallax_image_path">
You can not access it from home.component.css if that's what u are trying to do, but you can achieve the same effect using [ngStyle] angular directive.如果这是你想要做的,你不能从 home.component.css 访问它,但你可以使用 [ngStyle] angular 指令实现相同的效果。
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.