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>

推荐阅读更多精彩内容