angualr2 中用指令Directive实现图片尺寸随窗口尺寸而改变

前端编程中，经常遇到要求图片在保持宽高比的情况下，图片随窗口缩放而自动缩放，在 angular2 中我们可以用指令 Directive 实现这一功能。

首先在已有的 angular2 工程中进入要使用该功能的目录，然后在终端输入：

ng generate directive item-resize

在当前目录中会生成两个文件 item-resize.directive.ts 和 item-resize.directive.spec.ts，item-resize.directive.spec.ts 是单元测试文件我们在本文中不讨论。

用编辑器打开 item-resize.directive.ts，我用的是 VS Code，其它的也可以，输入以下代码： 

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

@Directive({
  selector: '[appItemResize]'
})
export class ItemResizeDirective {

  private el: HTMLElement;

  constructor(el: ElementRef, public renderer: Renderer) {
    this.el = el.nativeElement;
  }

  @HostBinding('style.height.px')
  elHeight: number;


  @HostListener('window:resize', ['$event.target'])
  onRe