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

如果条件不同（例如输入值可能为负值，而应仅为正值触发类），则可以添加额外属性：

@Input() 
uploadProgress = null;

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

如果条件复杂，则组件最好具有OnPush更改检测策略。

Angular5 - @HostBinding而不是：host

1 个答案: