anglar指令的使用

指令其实就像是自己给组件添加的一个属性

使用的地方 .html中

    <span appGridItem *ngFor="let item of channels">
      <img appGridItemImage="2rem" [src]="item.icon" alt="" />
      <span appGridItemTitle="0.6rem" class="title">{{ item.title }}</span>
    </span>

这里我们用了三个指令 去写一个上图片下文字的网格布局 才用css3 grid布局的方式去实现

appGridItem 指令 .directive.ts

@Directive({
  selector: '[appGridItem]'
})
export class GridItemDirective {
  @HostBinding('style.display') display = 'grid';
  @HostBinding('style.grid-template-areas') template = `'image' 'title'`;
  @HostBinding('style.place-items') align = 'center';
  @HostBinding('style.width') width = '4rem';
}

appGridItemImage 指令 .directive.ts

@Directive({
  selector: '[appGridItemImage]'
})
export class GridItemImageDirective implements OnInit {
  @Input() appGridItemImage = '2rem';
  constructor(private elr: ElementRef, private renderer: Renderer2) {}

  ngOnInit(): void {
    // 声明自己占据模版中的 image 区块
    this.setStyle('grid-area', 'image');
    this.setStyle('width', this.appGridItemImage);
    this.setStyle('height', this.appGridItemImage);
    this.setStyle('object-fit', 'cover');
  }

  private setStyle(styleName: string, styleValue: string | number) {
    this.renderer.setStyle(this.elr.nativeElement, styleName, styleValue);
  }
  @HostListener('click', ['$event.target'])
  handleClick(ev) {
    console.log(ev);
  }
}

appGridItemTitle 指令  .directive.ts

@Directive({
  selector: '[appGridItemTitle]'
})
export class GridItemTitleDirective {
  @HostBinding('style.font-size') @Input() appGridItemTitle = '0.5rem';
  @HostBinding('style.grid-area') area = 'title';
  @HostBinding('style.white-space') wrap = 'nowrap';
}

实现效果如下