angular中模板引用变量的使用场

背景：对于模板变量在angular中使用频繁且方式多样。对于常用的几种场景总结如下。

模板变量可以引用这些东西：

• 模板中的 DOM 元素

• 指令或组件

• 来自 ng-template 的 TemplateRef

• Web 组件

DOM元素：

<nz-carousel #carouser [nzEffect]="effect" nzAutoPlay [nzAutoPlaySpeed]="10000">
      <div nz-carousel-content *ngFor="let index of array">
        <img style="width: 100%" src="{{ index }}" alt="pic" />
      </div>
</nz-carousel>
<div class="banner-block left" (click)="carouser.pre()"></div>
<div class="banner-block right" (click)="carouser.next()"></div>

指令或组件：

<ng-container *ngIf="viewMode === viewModeOptions[0].name; else analysisTemp"></ng-container>
<ng-template #analysisTemp>analysis</ng-template>

TemplateRef：

作为modal，drawer , message的自定义模板
@ViewChild('messageTemplate') msgTemplate: TemplateRef<void>;
<ng-template #messageTemplate>
  <span>自定义模板 </span>
</ng-template>

组件：

@ViewChild('info', { static: false, read: EditInfoComponent }) infoComp: EditInfoComponent;
  <app-common-attachment #attach [objectId]="guaranteeId" [required]="true"></app-common-attachment>


@ViewChildren('financialSetting', { read: FinancialSettingsComponent }) attachComp: FinancialSettingsComponent[];
 <app-financial-settings
              *ngFor="let o of ruleList; let i = index"
              #financialSetting
              [hidden]="i != currentForm"
              [enterpriseOptions]="enterpriseOptions"
            ></app-financial-settings>