angular - 使用 Angular @HostBinding inside 指令来设置和更新主机上的属性值

Question

所以，假设我有以下指令：

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

...

主机属性不会更新为新值。初始初始化后这里没有数据绑定吗？堆栈上有很多答案，讨论如何使用 设置 attr 的初始值@HostBinding，但是在 init 之后更改该值呢？

Answer 1

我知道我哪里错了。

它应该是这样的：

<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); 
    }
}

看起来我误解了这种方法的语法。