指令和元素名称之间的区别

Question

我在使用Angular / Material时首先遇到了这个问题，但是我认为这是一个通用的HTML问题。我没有运气找到可以解释它的参考。

两者之间的基本功能区别是什么

    <mat-table [dataSource]="data">
    ...
    </mat-table>

相对

    <table mat-table [dataSource]="data">
    ...
    </table>

它们似乎都一样工作。至少除了CSS元素引用的编码方式外，我没有发现其他区别。但是为什么这些替代编码首先存在的背景是什么？

Answer 1

查看源代码： https://github.com/angular/material2/blob/master/src/lib/table/table.ts#L20

在MatTable装饰器中： selector: 'mat-table, table[mat-table]'

Angular指令支持多个选择器。根据{{​​3}}-选择器可以声明为以下之一：

• element-name：按元素名称选择。
• .class：按类别名称选择。
• ...
• selector1, selector2：选择选择器1或选择器2是否匹配。

因此，功能方面没有差异，因为MatTable组件只有两个不同的选择器。