是否可以使用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标记：这是什么意思？

所有指令都是sorta“自定义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解释。

以下片段......

<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"（或desugared变量中的ngFor let-item）访问此默认上下文变量。这是一个变量，它可以用于渲染该模板（例如，在无序列表中的li）。这是Angular告诉你的“嘿，这些数据可能对你有用，以便渲染一些东西;我会在这里生活，所以你可以使用它”。

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

你的例子也是如此。 let node告诉Angular“嘿，给我默认的上下文，这样我就可以在我的模板中使用它;我会称之为node”。现在无论node是什么都取决于组件的实现，但它可能是非常有用的东西，因为它是上下文的一部分。