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