Question

我正在寻找使用异步值处理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修复了它。请参阅don't access view local variables nor pipes in host expressions。

现在，在使用AoT编译进行编译时，我得到Parser Error: Host binding expression cannot contain pipes in Directive。

Answer 1

Tobias Bosch（Angular团队成员）写道：

组件（“子”）的主机绑定在组件中执行   使用该组件（“父”）。父组件可以   属于不同的NgModule。因此，如果您使用管道，管道是   解析了父组件的NgModule。但是，如果   NgModule没有声明你正在使用的管道，你的   组件坏了。

这就是我们从未希望在主机绑定中使用管道的原因。   在2.0 final之前的一个更大的编译器重构之后，我们   不小心重新引入它，但这是一个错误，而不是一个功能，因为   语义是错误的。

来源：

Async Host Binding No Longer Works #12671

Answer 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();
    }
}

确保您取消订阅您必须创建的订阅。

指令中的异步HostBinding

2 个答案: