指令 appGridItemImage的使用

Question

老师，这里我有点混淆appGridItemImage的使用。
我们首先新建了一个文件grid-item-image，来创建这个指令。
在这个指令文件中，我们有一个Input的属性，也叫 appGridItemImage。这两个元素使用同一个名称，是必须的吗？他们的区别是什么？
之后我们在html文件中，调用了这个指令，appGridItemImage，它是表示整个指令吗？为什么它又可以给appGridItemImage（这里应该是变量了吧？）赋值。

请老师解答。谢谢。

Answer 1

接灰的电子产品 2022-11-27 13:23: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);
}
}

• 提问者 weixin_慕侠1169668 #1

  谢谢老师耐心的解答。
  还有一个小问题，例子中如果针对第10行的属性（属性和指令的名字一样），那么在HTML文件中，以下两种都可行，还是只有第一种可行，为什么？谢谢老师。
  <img appGridItemImage="4rem" />
  <img appGridItemImage appGridItemImage="4rem" />

• 接灰的电子产品 #2

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