1回答

接灰的电子产品

2022-11-27

我写了一些注释，你看看是不是可以明白？

@Directive({
// 这个是指令的选择器，用于在模板中标记出这个指令
// 也就是说，在 html 模版中，只要有这个属性，就会触发这个指令
selector: "[appGridItemImage]",
})
export class GridItemImageDirective implements OnInit {
// 这个是指令的输入属性，也就是说，这个指令可以接受一个输入属性
// 这个命名不是随便起的，而是要和 html 模版中的属性名一致
// 这里由于我们只有一个属性，所以我们希望它和指令的选择器一致
@Input() appGridItemImage = "2rem";

// 但其实也不需要一致，比如我们可以这样写，下面两个属性
// 在 html 模版中我们只需要这样写就可以了
// <img appGridItemImage appGridItemImageHeight="4rem" />
// 需要注意的是，你仍然需要写 appGridItemImage
// 因为这个是指令的选择器，而不是输入属性
@Input() appGridItemImageHeight = "3rem";

constructor(private elr: ElementRef, private renderer: Renderer2) {}

ngOnInit(): void {
// 声明自己占据模版中的 image 区块
this.setStyle("grid-area", "image");
this.setStyle("width", this.appGridItemImage);
// 这里使用了新属性 appGridItemImageHeight
this.setStyle("height", this.appGridItemImageHeight);
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);
}
}

1

2

接灰的电子产品

相同名字属性只能有一个，这个是html 的约定，所以不行

2022-11-28

共2条回复