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＆＃34;自定义HTML标记＆＃34;。您为Angular模板编写的HTML根本不是HTML，它只是故意看起来像它。它是Angular自己用来构建DOM而不是你的模板语法（这就是你首先使用框架的原因）。

指令＆＃39;选择器是通过（有点）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告诉你，嘿，这些数据可能对你有用，以便呈现一些东西;我会住在这里，所以你可以使用它＆＃34;。

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

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

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

1 个答案: