Angular 4能否设置动态模板引用变量？循环场景示例

嘿，这个问题我之前碰到过不少开发者问，Angular 4里确实没办法直接用插值语法生成动态的模板引用变量（就像你写的<mat-datepicker #"{{'pick'+i}}"></mat-datepicker>这种写法是行不通的）。说白了，模板引用变量是Angular在编译阶段就解析好的，而插值是运行时才处理的，编译时Angular根本识别不了这种动态生成的变量名。不过别担心，有两个靠谱的替代方案能实现你要的效果：

方案一：用ViewChildren批量获取实例 #

不需要给每个mat-datepicker单独设置引用变量，直接通过ViewChildren获取所有组件实例，之后用索引来定位对应的picker。

模板代码 #

<!-- 循环渲染datepicker，不需要加#引用 -->
<mat-datepicker *ngFor="let item of dateItems; let i = index"></mat-datepicker>

组件代码 #

import { Component, ViewChildren, QueryList, AfterViewInit } from '@angular/core';
import { MatDatepicker } from '@angular/material/datepicker';

@Component({
  selector: 'app-dynamic-picker',
  templateUrl: './dynamic-picker.component.html'
})
export class DynamicPickerComponent implements AfterViewInit {
  dateItems = [1, 2, 3]; // 示例循环数据
  @ViewChildren(MatDatepicker) datepickers!: QueryList<MatDatepicker<any>>;

  ngAfterViewInit() {
    // 视图初始化后就能访问到所有datepicker实例了
    console.log('所有datepicker实例:', this.datepickers.toArray());
  }

  // 比如写个方法操作第i个picker
  openPicker(index: number) {
    const targetPicker = this.datepickers.toArray()[index];
    if (targetPicker) {
      targetPicker.open();
    }
  }
}

方案二：手动将实例存入组件数组 #

如果你想更精准地绑定每个picker到对应的索引，可以利用组件的初始化事件，把每个picker实例存到组件的数组里。

模板代码 #

<!-- 给每个picker设置固定的#picker，然后通过initialized事件把实例传给组件 -->
<mat-datepicker 
  #picker 
  *ngFor="let item of dateItems; let i = index"
  (initialized)="savePicker(picker, i)"
></mat-datepicker>

组件代码 #

import { Component } from '@angular/core';
import { MatDatepicker } from '@angular/material/datepicker';

@Component({
  selector: 'app-dynamic-picker',
  templateUrl: './dynamic-picker.component.html'
})
export class DynamicPickerComponent {
  dateItems = [1, 2, 3];
  pickerArray: MatDatepicker<any>[] = [];

  // 把picker实例按索引存入数组
  savePicker(picker: MatDatepicker<any>, index: number) {
    this.pickerArray[index] = picker;
  }

  // 操作指定索引的picker
  togglePicker(index: number) {
    const picker = this.pickerArray[index];
    if (picker) {
      picker.opened ? picker.close() : picker.open();
    }
  }
}

这两个方案都能完美替代“动态生成模板引用变量”的需求，根据你的实际场景选就行～

内容的提问来源于stack exchange，提问作者adisa