angular使用directive实现图片正方形裁切

最近用angular开发了一个类商城应用，其中有一个功能是商品列表页必须显示正方形图片，否则页面排版就很混乱。于是学习了下directive的使用方法，写了个图片正方形裁切（其实是隐藏）的指令：

@Directive({
  selector: '[foursquare]'
})
export class FoursquareDirective implements AfterViewInit {

  constructor(private _element: ElementRef, private renderer: Renderer2, private logger: LoggerService) {
    // renderer.setStyle(_element.nativeElement, 'color', 'red')
  }

  ngAfterViewInit(): void {
    let el = this._element.nativeElement
    this.logger.debug(el.clientWidth)
    // 动态设置区域高度=宽度
    this.renderer.setStyle(el, 'height', el.clientWidth + 'px')
    this.renderer.setStyle(el, 'overflow-y', 'hidden')
  }
}

该指令只是根据图片宽度（因为移动端页面一般按照宽度按百分比分配）设置图片高度，当高度超出时隐藏掉超出部分。使用方法：

<div class="image clearfix" foursquare>
   ![]({{ goods.goodsImgUrl }})
</div>