angular - 指令中的异步 HostBinding

Question

我正在寻找使用异步值处理 HostBinding 的最佳方法。

在 Angular v2.1.2 之前，我可以像这样在 @Directive 装饰器中使用 host 属性:

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

但看起来这不是预期的行为，因为版本 2.1.2 修复了它。参见 don't access view local variables nor pipes in host expressions .

现在，在使用 AoT 编译时，我得到解析器错误:主机绑定(bind)表达式不能包含指令中的管道。

Answer 1

Tobias Bosch(Angular 团队成员)写道:

Host bindings of a component ("child") are executed in the componentthat uses that component ("parent"). And the parent component canbelong to a different NgModule. So if you use a pipe, the pipe isresolved against the NgModule of the parent component. However, ifthat NgModule does not declare the pipe that you are using, yourcomponent is broken.

This is the reason why we never wanted to have pipes in host bindings.After one of the bigger compiler refactorings before 2.0 final, weaccidentally reintroduced it, but this was a bug, not a feature, asthe semantics are wrong.

来源:

Async Host Binding No Longer Works #12671

还有一个开放的票证，可以将 Observables 与 HostBindings 一起使用:

https://github.com/angular/angular/issues/19483