Использование внутренней директивы Angular @HostBinding для установки и обновления значений атрибутов на хосте

Итак, допустим, у меня есть следующая директива:

<div foo></div>

import { Directive, HostBinding } from '@angular/core';

@Directive({
    selector: '[foo]'
});

export class FooDirective {
    x: number;

    constructor() {
        this.x = 100;
    }

    @HostBinding('style.left.px')
    styleLeftPx: number = this.x;
}

Если я визуализирую это как есть, это не работает, потому что this.x получает свое значение после инициализации @HostBinding.

Итак, изменив вышеприведенное на что-то более похожее на это:

...

x: number = 100;

constructor() {}

...

И установив это значение вне конструктора, оно будет добавлено без проблем.

Однако, если я попытаюсь изменить это значение в любой момент, например, с тайм-аутом:

...

x: number = 100;

constructor () {
    setTimeout(() => {
        this.x = 200;
    }, 2000)
}

...

Атрибут хоста не обновляется до нового значения. После начальной инициализации здесь не происходит привязка данных? Здесь в стеке есть много ответов, в которых обсуждается, как установить начальное значение атрибута с помощью @HostBinding, но как насчет изменения этого значения после инициализации?


angular angular2-hostbinding
person katyusha    schedule 09.08.2017    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Я понял, где ошибся.

Это должно быть так:

<div foo></div>

import { Directive, HostBinding } from '@angular/core';

@Directive({
    selector: '[foo]'
});

export class FooDirective {
    @HostBinding('style.left.px')
    x: number = 100;

    constructor() {
        setTimeout(() => {
            this.x = 200;
        }, 2000); 
    }
}

Похоже, я неправильно понял синтаксис, связанный с этим подходом.

person katyusha    schedule 09.08.2017