Question

我想创建一个表过滤器组件，该组件与Angular Material中matSort/mat-sort-header组件的结构和语法保持一致。在那里创建它的方法是在matSort元素上放置一个<table>指令，然后对于要进行排序的每一列，都将mat-sort-header指令放入。但是，有趣的是，没有给mat-sort-header指令的元素的列只不过是<th>中的文本，而带有mat-sort-header指令的列将获得该列（包含所包含的文字）变成一个按钮。

我查看了@angular/material/sort（https://github.com/angular/components/blob/master/src/material/sort/sort-header.html）的源代码，发现mat-sort-header实际上装饰为@Component，而不是{{1} }，并带有自己的模板。但是，这有点违背了我对组件的理解。我知道组件是的指令，但我不知道您可以将指令放在本机HTML元素中并获得内在的功能来生成HTML。

下面是创建可排序表头的方法：

@Directive

我将mat-sort-header作为属性指令读取，但是源代码显示它是 component指令。文档中是否有此内容？这可行吗？

沿着同一行，如果我想制作与该结构相似的自己的过滤器/排序组件，Angular支持吗？

Answer 1

所有指令都是内部组件。全部关于装饰器。指令装饰器使编译器知道您将不会使用模板，并且通常将使用使用该组件来更改DOM布局或更改元素的外观或行为。（请参阅：link）。

mat-sort-header仍然是一个组件，它具有模板，只是通过使用属性进行选择。在selector: [mat-sort-header]中可以看到。他们也可以将其作为指令，但是由于他们需要视图/样式，因此需要将其作为组件。

Answer 2

我在这里的困惑是在假设中，数字。

在我的原始帖子中，我将代码显示为

<ng-container matColumnDef="position">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> No. </th>
    <td mat-cell *matCellDef="let element"> {{element.position}} </td>
</ng-container>

但是我也看到它写为

<ng-container matColumnDef="position">
    <mat-header-cell *matHeaderCellDef mat-sort-header> No. </th>
    <mat-cell *matCellDef="let element"> {{element.position}} </td>
</ng-container>

（请注意缺少的th元素）。

是我看到的第二个问题引发了我的问题，经过反复思考，我得出了一个{错误的结论：mat-header-cell是一个组成部分。那没有道理，在同一个元素中如何存在两个组件？毕竟，Angular自己说过here：

角度组件是指令的子集，始终与模板。与其他指令不同，只能将一个组件根据模板中的每个元素实例化。

因此，我四处寻找实现两个目标之一的方法：更好地了解Angular，或证明Angular在说谎。查看表源代码，documentation显示mat-header-cell实际上是一条指令，并且可以通过两个可能的选择器来识别它。

/** Header cell template container that adds the right classes and role. */
@Directive({
  selector: 'mat-header-cell, th[mat-header-cell]',
  host: {
    'class': 'mat-header-cell',
    'role': 'columnheader',
  },
})
export class MatHeaderCell extends CdkHeaderCell {
  constructor(columnDef: CdkColumnDef,
              elementRef: ElementRef<HTMLElement>) {
    super(columnDef, elementRef);
    elementRef.nativeElement.classList.add(`mat-column-${columnDef.cssClassFriendlyName}`);
  }
}

Doh ...

这意味着顶部的STILL仅包含一个组件。因此，一切仍然完好无损，Angular非常诚实，我学到了一些东西。祝您开源！

每个人都保留您的观点和答案，我只是想弄清楚为什么要问，以及在我大脑中有意义的最终点击。

可以在HTML元素中识别角度分量吗？

2 个答案: