Javascript Angular2属性指令属性

我正试图制定一个angular2（4）指令。我使用它来设置div的样式，并添加一个背景图像。背景图像的源由使用该指令的组件传递

我无法访问输入。它不断返回未定义的

这就是我所做的

图像样式
指令

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+"')";
    }

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

comont.html
使用指令

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+"')";
    }

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


{{brand.name}
{{brand.category}
{{brand.location}

这是我第一次尝试这样的事情。我明确地遵循了命令，但仍然无法访问该属性。我不知道我在哪里错过了它
有什么建议吗？
根据上面的@jornsharpe（在评论中），在构造函数中无法访问输入。所以我把它移到了
ngOnInit（）
lifecyclehook，它成功了

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+"')";
    }

}

根据上面的@jornsharpe（在注释中），在构造函数中无法访问输入。所以我把它移到了
ngOnInit（）
lifecyclehook，它成功了

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+"')";
    }

}

它在构造函数中肯定是未定义的，直到生命周期的后期才能访问输入。您需要将该指令应用于div。@jornsharpe它起作用了！谢谢我在一个
ngOnInit（）
lifecycle钩子中创建了
this.\u setProperties（）
它在构造函数中肯定是未定义的，输入在生命周期的后期才可访问。你需要将该指令应用于div。@jornsharpe它工作了！谢谢我在一个
ngOnInit（）
生命周期钩子中创建了
this.\u setProperties（）