Angular5 - @HostBinding 而不是 :host

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 类将被触发为真 uploadProgress，这可能是预期的行为。

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

@Input() 
uploadProgress = null;

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

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