Async HostBinding в директиве

Я ищу лучший способ обработать HostBinding с асинхронным значением.

До Angular v2.1.2 Я мог бы использовать свойство host в декораторе @Directive:

@Directive({
    selector: 'img[my-directive]',
    host    : {
        '[alt]'  : "alt | async"
    }
})
export class MyDirective {
    alt: Observable<string>;
}

Но похоже, что это не было предполагаемым поведением, поскольку версия 2.1.2 исправляет его. См. не получить доступ к локальным переменным и никам в выражениях хоста.

Теперь, при компиляции с компиляцией AoT, я получаю Parser Error: Host binding expression cannot contain pipes in Directive.

Ответ 1

Тобиас Бош (член команды Angular) пишет:

Связывание узлов компонента ("дочерний") выполняется в компоненте, который использует этот компонент ("родительский"). И родительский компонент может принадлежать другому NgModule. Поэтому, если вы используете канал, то канал разрешается против NgModule родительского компонента. Однако, если этот NgModule не объявляет используемый вами канал, ваш компонент не работает.

Именно по этой причине мы никогда не хотели иметь трубы в привязках хостов. После одной из больших рефакторингов компилятора до финала 2.0 мы случайно вернули его, но это была ошибка, а не функция, поскольку семантика неверна.

Источник:

Async Host Binding больше не работает # 12671

Ответ 2

Я уверен, что нет особого способа сделать это. Вам необходимо явно присвоить свойству

@Directive({
    selector: 'img[my-directive]',
    host    : {
        '[alt]'  : "alt"
    }
})
export class MyDirective {
    altObservable: Observable<string>;
    alt: string;

    subscription:Subscription;    

    ngOnInit() {
      this.subscription = this.altObservable.subscribe(val => this.alt = val)
    }

    ngOnDestroy(){
      this.subscription && this.subscription.unsubscribe();
    }
}

Убедитесь, что вы отмените подписку, которую вы создаете обязательно.