Angular5

Question

我读到最好使用@HostBinding 而不是:host。所以我想改变我的 component.ts

@Component({
    host: {
        'class': 'cover',
        '[class.uploading]': 'uploadProgress > 0',
    }
})

这很好用，但是当我将其更改为：

export class Cover {
    @HostBinding('class') classes = 'mark6-cover';
    @HostBinding('[class.uploading]') uploadProgress > 0;

    @Input() uploadProgress = null;
}

我遇到错误，但没有任何效果。我在这里做错了什么？我怎样才能使变量 uploadProgress 成为可观察的？

Answer 1

'[class.uploading]': 'uploadProgress > 0' 对应的是：

@HostBinding('class.uploading')
@Input() 
uploadProgress = null;

uploadProgress 输入可以从可观察订阅或其他地方异步设置。

uploading class 将被触发为 truthy uploadProgress，这可能是预期的行为。

如果条件不同（例如输入值可以是负数，而 class 应该只对正值触发），可以添加额外的属性：

@Input() 
uploadProgress = null;

@HostBinding('class.uploading')
get isUploading() {
  return this.uploadProgress > 0;
}

如果条件复杂，组件最好有OnPush变化检测策略。

Angular5 - @HostBinding 而不是 :host

Angular5 - @HostBinding instead of :host

typescript

angular2-hostbinding