Angular 尝试使用视频课程学习角度-坚持使用ViewContainerRef&；模板引用

正如标题所说，我一直在尝试（并成功地）学习角度，直到我进入结构指令

我必须使用TemplateRef和ViewContainerRef创建自己的

课程老师是这样做的：

import { Directive, TemplateRef, Input, ViewContainerRef } from '@angular/core';

@Directive({
  selector: '[appUnless]'
})
export class UnlessDirective {
  @Input() set appUnless(condition: boolean)
  {
    if(!condition)
    {
      console.log(this.templateRef);
      console.log(this.vcRef);
      this.vcRef.createEmbeddedView(this.templateRef);
    }
    else
    {
      console.log(this.templateRef);
      console.log(this.vcRef);
      this.vcRef.clear();
    }
  }

  constructor(private templateRef: TemplateRef<any>, private vcRef: ViewContainerRef) { }

}

<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <button
        class="btn btn-primary"
        (click)="onlyOdd = !onlyOdd">Only show odd numbers</button>
      <br><br>
      <ul class="list-group" *appUnless="onlyOdd">
        <li
          class="list-group-item" *ngFor="let number of numbers">
          {{number}}
        </li>
      </ul>
      <ng-template>
        <p>Only odd</p>
      </ng-template>
    </div>
  </div>
</div>

import{Directive，TemplateRef，Input，ViewContainerRef}来自“@angular/core”；
@指示({
选择器：“[AppInspect]”
})
出口类非关税指令{
@Input（）集合APPINER（条件：布尔）
{
如果（！条件）
{
console.log（this.templateRef）；
console.log（this.vcRef）；
this.vref.createEmbeddedView（this.templateRef）；
}
其他的
{
console.log（this.templateRef）；
console.log（this.vcRef）；
这个.vcRef.clear（）；
}
}
构造函数（私有templateRef:templateRef，私有vcRef:ViewContainerRef）{}
}
只显示奇数





{{number}}


很奇怪

我插入了console.log行，以便查看发生了什么

不幸的是，我无法理解这段代码是如何工作的

我也一直在尝试使用Angular文档，但我似乎并不真正理解它

到目前为止，我所理解的（我不确定它是否正确）是TemplateRef只是将从指令中的*创建的引用，ViewContainerRef通过createEmbeddedView（）或clear（）等方法显示它或不显示它

有谁能向我详细解释一下代码的功能，主要是TemplateRef和ViewContainerRef？

---

谢谢。

结构指令负责HTML布局。它们通常通过添加、删除或操作元素来塑造或重塑DOM的结构

简单来说，

TemplateRef

是对模板的引用，即您附加指令的视图（在您的情况下，它是

ul

）

顾名思义，

ViewContainerRef

，就是保存您的视图的容器

基本上，您可以从容器（即DOM）中切换（附加和删除）模板（视图）

大概是这样的：

...
<button class="btn btn-primary" (click)="onlyOdd = !onlyOdd">Only show odd numbers</button>
<br><br>
<ng-container> <--- your view container
    <ul>   <-- your template
        ...
    </ul>
<ng-container>
<ng-template>
    <p>Only odd</p>
</ng-template>
...

。。。
只显示奇数



结构指令负责HTML布局。它们通常通过添加、删除或操作元素来塑造或重塑DOM的结构

简单来说，
TemplateRef
是对模板的引用，即您附加指令的视图（在您的情况下，它是
ul
）

顾名思义，
ViewContainerRef
，就是保存您的视图的容器

基本上，您可以从容器（即DOM）中切换（附加和删除）模板（视图）

大概是这样的：

...
<button class="btn btn-primary" (click)="onlyOdd = !onlyOdd">Only show odd numbers</button>
<br><br>
<ng-container> <--- your view container
    <ul>   <-- your template
        ...
    </ul>
<ng-container>
<ng-template>
    <p>Only odd</p>
</ng-template>
...

。。。
只显示奇数



结构指令负责HTML布局。它们通常通过添加、删除或操作元素来塑造或重塑DOM的结构。简单来说，
TemplateRef
是对模板的引用，即您附加指令的视图（在您的情况下，它是
ul
）。顾名思义，
ViewContainerRef
，就是保存您视图的容器。基本上，您可以从容器（即DOM）中切换（附加和删除）模板（视图）。你能详细说明一下这个“ViewContainerRef，顾名思义，就是保存你观点的容器。”？这是否意味着该组件中的整个HTML文件都存储在此ViewContainerRef中？结构指令负责HTML布局。它们通常通过添加、删除或操作元素来塑造或重塑DOM的结构。简单来说，
TemplateRef
是对模板的引用，即您附加指令的视图（在您的情况下，它是
ul
）。顾名思义，
ViewContainerRef
，就是保存您视图的容器。基本上，您可以从容器（即DOM）中切换（附加和删除）模板（视图）。你能详细说明一下这个“ViewContainerRef，顾名思义，就是保存你观点的容器。”？这是否意味着该组件中的整个HTML文件都存储在此ViewContainerRef中？谢谢您的回答：）谢谢您的回答：）