最近用angular開(kāi)發(fā)了一個(gè)類(lèi)商城應(yīng)用，其中有一個(gè)功能是商品列表頁(yè)必須顯示正方形圖片，否則頁(yè)面排版就很混亂。于是學(xué)習(xí)了下directive的使用方法，寫(xiě)了個(gè)圖片正方形裁切（其實(shí)是隱藏）的指令：

@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)
    // 動(dòng)態(tài)設(shè)置區(qū)域高度=寬度
    this.renderer.setStyle(el, 'height', el.clientWidth + 'px')
    this.renderer.setStyle(el, 'overflow-y', 'hidden')
  }
}

該指令只是根據(jù)圖片寬度（因?yàn)橐苿?dòng)端頁(yè)面一般按照寬度按百分比分配）設(shè)置圖片高度，當(dāng)高度超出時(shí)隱藏掉超出部分。使用方法：

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