Angular5 - @HostBinding вместо: хост

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 стратегию обнаружения изменений.