是否可以使用 angular 指令作为 html 标签？

Question

我目前正在使用角度材质树模块和演示源代码https://github.com/angular/material2/blob/tree/src/demo-app/tree/tree-demo.html：

• mat-tree-node 指令被用作自定义 html 标签：这是什么意思？

• *matTreeNodeDef="let node" : let node 表达式到底是什么？

  压扁的树

  <mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
    <mat-tree-node *matTreeNodeDef="let node" matTreeNodeTrigger matTreeNodePadding>
        {{node.key}} : {{node.value}}
    </mat-tree-node>
  
    <mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding>
        <mat-icon matTreeNodeTrigger>
          {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
        </mat-icon>
        {{node.key}} : {{node.value}}
    </mat-tree-node>
  </mat-tree>
  

Answer 1

mat-tree-node 指令用作自定义 html 标签：这是什么意思？

所有指令都是“自定义 HTML 标签”。你为 Angular 模板编写的 HTML 根本不是 HTML，它只是故意看起来像它。这是 Angular 自己的模板语法，Angular 使用它来构建 DOM，而不是你（这就是你首先使用框架的原因）。

指令的选择器是通过（有点）CSS 选择器指定的。指令的选择器可以是foo、[foo] 或foo[bar]。这就像您在样式表中写的div、[lang=en] 或input[required]。模板中的<foo> 将匹配第一个选择器，以及<foo baz>。 <div foo> 将匹配第二个选择器，以及<p foo>。对于第三个，您需要将元素名称设置为foo 和属性bar，这意味着<foo bar> 将匹配。指令没有必须具有属性选择器。

*matTreeNodeDef="let node" : let 节点到底表达了什么？

星号只是语法糖，用于以更详细的方式编写相同的内容。一般通过*ngFor解释。

下面的sn-p...

<li *ngFor="let item of items; index as i; trackBy: trackByFn">...</li>

...只是写这个的一种很好的方式：

<ng-template ngFor let-item [ngForOf]="items" let-i="index" [ngForTrackBy]="trackByFn">
  <li>...</li>
</ng-template>

每个模板都有一个附加的上下文。您可以将模板视为函数，将上下文视为这些函数的参数。当你使用ngFor 时，Angular 会创建一个上下文变量，你可以通过关键字let 访问它。就ngFor 而言，循环的每次迭代都不同：它是传递给ngForOf 的数组中的当前项。

您可以使用*ngFor="let item"（或脱糖变体中的ngFor let-item）访问此默认上下文变量。这是一个变量，它对您渲染那段模板很有用（例如，无序列表中的 li）。这是 Angular 告诉你的“嘿，这段数据可能对你有用，以便渲染一些东西；我会把它放在这里，这样你就可以使用它了”。

ngFor 中还有其他上下文变量：例如，even。它是一个布尔变量，告诉您当前迭代是否具有偶数索引。 Angular 将它提供给您，您可以通过 *ngFor="let item; let e = even"（或者，以不支持的形式，ngFor let-item let-e="even"）使用它。这些非默认上下文变量有名字；这个名为even。我们告诉 Angular “嘿，我想在我的模板中使用这个 even 并且我想在我的模板中调用它 e”。

这与您的示例相同。 let node 告诉 Angular “嘿，给我默认上下文，这样我就可以在模板中使用它；我会称之为 node”。现在无论node 是什么都取决于组件的实现，但它可能真的很有用，因为它是上下文的一部分。