是否可以将 angular 指令用作 html 标记？

Question

我目前正在使用 angular material 树模块和演示源代码 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 directive is used as custom html tag: what does that mean?

所有指令都是 "custom HTML tags"。您为 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" : what does the let node expression exactly?

星标只是语法糖，用于以更冗长的方式编写相同的内容。通常通过*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"（或脱糖变体中的 ngFor let-item）访问此默认上下文变量。这是一个变量，它对您呈现该模板很有用（例如，无序列表中的 li）。 Angular 告诉你 "hey, this piece of data might be useful to you in order to render something; I'll live it here so you can use it"。

ngFor 中还有其他上下文变量：例如，even。它是布尔变量，告诉您当前迭代是否有偶数索引。 Angular 将它提供给您，您可以通过 *ngFor="let item; let e = even"（或者，以 desuraged 形式，ngFor let-item let-e="even"）使用它。这些非默认上下文变量有名称；这个名为 even。我们告诉 Angular "hey, I wanna use this even and I wanna call it e in my template".

你的例子也是一样的。 let node 告诉 Angular "hey, give me the default context so I can use it in my template; I'll call it node"。现在 node 是什么取决于组件的实现，但它可能是真正有用的东西，因为它是上下文的一部分。

是否可以将 angular 指令用作 html 标记？

Is it possible to use angular directive as html tag?

angular-directive

angular-material2

angular