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

主机属性不会更新为新值。初始初始化后，这里是否没有数据绑定？这里有很多答案讨论如何使用@HostBinding设置attr的初始值，但是在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); 
    }
}

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

使用Angular @HostBinding inside指令在主机上设置和更新属性值

1 个答案: