Angular 8 - 如何在派生中使用@HostBinding 而不是主机

Question

我在 Medium (https://medium.com/@sub.metu/angular-fallback-for-broken-images-5cd05c470f08) 上发现了这个非常好的指令：

import {Directive, Input, HostBinding} from '@angular/core'
@Directive({
    selector: 'img[default]',
    host: {
      '(error)':'updateUrl()',
      '(load)': 'load()',
      '[src]':'src'
     }
  })

 export class ImagePreloadDirective {
    @Input() src:string;
    @Input() default:string;
    @HostBinding('class') className

    updateUrl() {
      this.src = this.default;
    }
    load(){
      this.className = 'image-loaded';
    }
  }

但是，TSlint 告诉我应该在第 4 行使用 HostBinding 而不是 host。但我没有找到可以帮助我实现这一点的文档。有人可以帮忙吗？

Answer 1

您可以随时根据需要配置 tslint：

tslint.json

...
"no-host-metadata-property": false,

如果你想遵循 Angular 的建议，那么你可以像这样重写它：

image-preload.directive.ts

import { Directive, Input, HostBinding, HostListener } from '@angular/core';

@Directive({
  selector: 'img[default]',
})
export class ImagePreloadDirective {
  @Input()
  @HostBinding('src')
  src: string;

  @Input() default: string;

  @HostBinding('class') className;

  @HostListener('error')
  updateUrl() {
    this.src = this.default;
  }

  @HostListener('load')
  load() {
    this.className = 'image-loaded';
  }
}