Angular2 특성 지시문 속성

Question

angular2 (4) 지시문을 만들려고합니다. div 스타일을 지정하고 배경 이미지를 추가하는 데 사용합니다. 배경 이미지의 소스는 해당 지시어를 사용하는 구성 요소에 전달됩니다.

입력에 액세스 할 수 없습니다. 그것은 내가 지시

<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> 

이건 내 처음으로 이런 식으로 뭔가를 시도를 사용하여

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을 한 일 undefined 을 Heres를 반환 유지합니다. 나는 documentation을 명시 적으로 따라 갔고 나는 여전히 그 부동산에 대한 접근권을 가지고 있지 않다. 내가 어디 그것을 놓친 지 잘 모르겠다 어떤 제안?

Answer 1

위의 @jonrsharpe에 따르면 (의견에서) 생성자에서 입력에 액세스 할 수 없습니다. 그래서 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+"')"; 
    } 

}