指令其实就像是自己给组件添加的一个属性
使用的地方 .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';
}
实现效果如下