[英]Angular2 attribute directive property
I am trying to make an angular2(4) directive. 我试图做一个angular2(4)指令。 i use it to style the div, and add a background image.
我用它来设置div的样式,并添加背景图像。 the source of the background image is passed by the component using that directive.
组件使用该指令传递背景图像的源。
I am not able to get access to the input. 我无法访问输入。 it keeps returning
undefined
Heres what i did 它一直返回
undefined
继承人我所做的
image-style
directive image-style
指令
import { Directive, ElementRef, Input } from '@angular/core';
@Directive({
selector: '[image-style]' // Attribute selector
})
export class ImageStyleDirective {
@Input("image-style") imageSrc: string;
constructor(public el: ElementRef) {
console.log('Hello ImageStyleDirective Directive');
console.log(this.imageSrc); //THIS RETURNS UNDEFINED EVERY TIME
this._setProperties();
}
_setProperties(){
console.log(this.imageSrc);
this.el.nativeElement.style.width = "70px";
this.el.nativeElement.style.height = "70px";
this.el.nativeElement.style.borderRadius = "50%";
this.el.nativeElement.style.backgroundSize = "contain";
this.el.nativeElement.style.backgroundPosition = "center center";
this.el.nativeElement.style.backgroundRepeat = "no-repeat";
this.el.nativeElement.style.backgroundColor = "#2d2439";
this.el.nativeElement.style.backgroundImage = "url('"+this.imageSrc+"')";
}
comonent.html
using the directive comonent.html
使用指令
<div class="item-block">
<ion-grid>
<ion-row align-items-center>
<ion-col class="image">
<div [image-style]="brand.image"></div>
</ion-col>
<ion-col col-9>
<div class="name">{{brand.name}}</div>
<div class="category">{{brand.category}}</div>
<div class="location">{{brand.location}}</div>
</ion-col>
</ion-row>
</ion-grid>
</div>
This is my first time attempting something like this. 这是我第一次尝试这样的事情。 i followed the documentation explicitly and i still don't have access to the property.
我明确遵循了文档 ,但仍然无法访问该属性。 I am not sure where i missed it Any suggestions?
我不确定我在哪里错过任何建议?
According to @jonrsharpe above(in the comments) The input is not accessible in the constructor. 根据上面的@jonrsharpe(在注释中)在构造函数中无法访问输入。 So i moved it to the
ngOnInit()
lifecycle hook and it worked! 因此,我将其移至了
ngOnInit()
生命周期挂钩,并成功了!
import { Directive, ElementRef, Input } from '@angular/core';
@Directive({
selector: '[image-style]' // Attribute selector
})
export class ImageStyleDirective {
@Input("image-style") imageSrc;
constructor(public el: ElementRef) {
console.log('Hello ImageStyleDirective Directive');
}
ngOnInit(){
console.log(this.imageSrc);
this._setProperties();
}
_setProperties(){
console.log(this.imageSrc);
this.el.nativeElement.style.width = "70px";
this.el.nativeElement.style.height = "70px";
this.el.nativeElement.style.borderRadius = "50%";
// max-width: 40%;
// this.el.nativeElement.style.margin = "auto";
this.el.nativeElement.style.backgroundSize = "contain";
this.el.nativeElement.style.backgroundPosition = "center center";
this.el.nativeElement.style.backgroundRepeat = "no-repeat";
this.el.nativeElement.style.backgroundColor = "#2d2439";
this.el.nativeElement.style.backgroundImage = "url('"+this.imageSrc+"')";
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.