指令中的主机属性是什么以及如何知道这些细节

Question

嗨，我使用 angular 8 和 ng-bootstrap 在我的项目中添加表
我发现这段代码我不太理解

  @Directive({
  selector: 'th[sortable]',
  host: {
    '[class.asc]': 'direction === "asc"',
    '[class.desc]': 'direction === "desc"',
    '(click)': 'rotate()'
    }
  })

谁能告诉我代码说什么？
以及选择器中的“th”是什么意思。
还主机我可以将其更改为其他内容，因为编辑说的是，它是旧属性还是什么
谢谢大家

Answer 1

根据 Angular文档：

选择器

选择器：在模板中标识此指令并触发该指令实例化的 CSS 选择器。

因此，在您的代码selector: 'th[sortable]'选择器中，按th元素名称和[sortable]属性声明选择。你应该<th sortable>...在你的 html 文件中找到类似的东西。

更新以回答评论：根据评论中共享的链接，这里是th sortablehtml 代码：

主持人

host：使用一组键值对将类属性映射到属性、属性和事件的宿主元素绑定。

host: {
    [key: string]: string;
}

这是最好使用@HostBinding和@HostListener，而不是host通过角风格指南，检查此链接了解更多详情。

要替换host您的代码：

@HostBinding允许您在承载指令的元素或组件上设置属性。因此，它将用您的指令中的以下内容替换您的[class.asc]和[class.desc]代码：

@HostBinding('class.asc') direction = 'asc';

@HostBinding('class.desc') direction = 'desc';

@HostListener允许您侦听宿主元素或组件上的事件。因此，您的'(click)'代码将替换为指令中的以下内容：

@HostListener('click') rotate() { 
  // todo:  
}

Answer 2

首先，您应该了解指令和组件之间的区别。

与组件不同，指令不需要视图。他们应该负责渲染逻辑：adding/removing元素和/或向 DOM 元素或组件添加自定义行为。

th[sortable]- 将其视为正常现象CSS selector。这将被翻译为：th具有sortable属性的元素：<th sortable></th>。如果选择器是逗号分隔的( th,[sortable])，则意味着您可以使用指令 as thor <any-comp sortable></any-comp>or <th sortable></th>。

文档host中提到的属性

使用一组键值对将类属性映射到属性、特性和事件的宿主元素绑定。

其中host element是您附加指令的元素/组件。

HostBinding但是，您可以通过使用和获得相同的结果HostListener。

考虑到这一点，您的代码可能如下所示：

@Directive({ ... })
export class YourAwesomeDirective {
 @HostBinding('class.asc')
 get ascClass () {
  return this.direction === 'asc';
 }

 @HostBinding('class.desc')
 get descClass () {
  return this.direction === 'desc';
 }

 @HostListener('click', '[$event]')
 onClick (ev) { /* ... */ }
}