angular基础——指令

指令(Directive)可以理解为没有模版的组件，它需要寄宿在一个元素上——宿主（Host）

1.HostBinding 绑定宿主的属性或样式

import { Directive, HostBinding } from '@angular/core';

@Directive({
	// 推荐使用方括号 [] 指定 Selector，虽然这个不是必须的。
    // 加上中括号后可以在宿主元素中把指令当成属性使用
    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';
 }

2.HostListener 绑定宿主的事件

import { Directive, OnInit, Input, ElementRef, Renderer2, HostListener } from '@angular/core';

@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);
  }
}

3.:host 伪类选择器
改变宿主组件的css样式

:host {
    display: flex;
    justify-content: center;
}