Angular属性指令绑定模板引用变量类型不符问题咨询

看起来你遇到了两个核心问题：一是通过模板引用数组传递时，拿到的是TemplateRef而非自定义的FilterableTemplateDirective实例；二是filter属性的赋值时机晚于templates数组的初始化。我来给你分析下原因，再提供两种可行的解决方案：

方案一：使用ContentChildren自动查询（推荐） #

这种方式更符合Angular的组件/指令设计思路，不需要手动传递模板引用数组，框架会自动帮你收集所有匹配的FilterableTemplateDirective实例，并且能确保在属性赋值完成后再处理。

修改TemplateSelectorDirective代码： #

import { Directive, ContentChildren, QueryList, AfterContentInit } from '@angular/core';
import { FilterableTemplateDirective } from './filterable-template.directive';

@Directive({ selector: "[templateSelector]" })
export class TemplateSelectorDirective implements AfterContentInit {
  // 自动查询所有子内容中的FilterableTemplateDirective实例
  @ContentChildren(FilterableTemplateDirective) 
  private templatesQuery: QueryList<FilterableTemplateDirective>;
  public templates: FilterableTemplateDirective[];

  ngAfterContentInit() {
    // 此时所有FilterableTemplateDirective实例都已初始化，filter属性也完成赋值
    this.templates = this.templatesQuery.toArray();
    // 在这里执行你的筛选逻辑
    this.processTemplates();
  }

  private processTemplates() {
    this.templates.forEach(template => {
      console.log('Filter value:', template.filter); // 能正常获取到filter值
      // 你可以在这里根据filter值做后续的筛选/渲染处理
    });
  }
}

简化模板结构： #

不需要手动传递模板数组，框架会自动收集：

<div templateSelector>
  <ng-template filter="div[data-type-a]"> 
    <!-- 模板A内容 -->
  </ng-template>
  <ng-template filter="div[data-type-b]"> 
    <!-- 模板B内容 -->
  </ng-template>
</div>

方案二：通过模板引用变量绑定指令实例（适合指定特定模板场景） #

如果你需要手动指定要传入的模板（而不是收集所有），可以通过给自定义指令添加exportAs属性，让模板引用变量指向指令实例而非默认的TemplateRef。

第一步：修改FilterableTemplateDirective添加exportAs： #

import { Directive, Input } from '@angular/core';
import { TemplatePortalDirective } from '@angular/cdk/portal';

@Directive({ 
  selector: "[filter]ng-template",
  exportAs: "filter" // 新增这一行，让模板引用能指向指令实例
})
export class FilterableTemplateDirective extends TemplatePortalDirective {
  @Input() filter: string;
  constructor(templateRef: TemplateRef<any>, viewContainerRef: ViewContainerRef) {
    super(templateRef, viewContainerRef);
  }
}

第二步：修改模板引用变量绑定指令： #

<div [templateSelector]="[templateA, templateB]"></div>
<!-- 使用#templateA="filter"让引用指向FilterableTemplateDirective实例 -->
<ng-template filter="div[data-type-a]" #templateA="filter"> 
  <!-- 模板A内容 -->
</ng-template>
<ng-template filter="div[data-type-b]" #templateB="filter"> 
  <!-- 模板B内容 -->
</ng-template>

第三步：在TemplateSelectorDirective的合适生命周期处理： #

确保在filter属性赋值完成后再处理，比如用ngOnInit钩子：

import { Directive, Input, OnInit } from '@angular/core';
import { FilterableTemplateDirective } from './filterable-template.directive';

@Directive({ selector: "[templateSelector]" })
export class TemplateSelectorDirective implements OnInit {
  @Input("templateSelector") templates: FilterableTemplateDirective[];

  ngOnInit() {
    // 此时filter属性已经完成赋值
    this.processTemplates();
  }

  private processTemplates() {
    this.templates.forEach(template => {
      console.log('Filter value:', template.filter); // 能正常获取到filter值
    });
  }
}

为什么原来的方法不行？ #

1. 模板引用变量的默认指向：当你写#templateA时，Angular默认绑定的是<ng-template>的TemplateRef对象，而不是附加在它上面的FilterableTemplateDirective实例，所以传递数组时拿到的是TemplateRef而非你的指令。
2. 赋值时机问题：Angular会先解析模板引用变量，再处理指令的@Input绑定，所以在templates数组被赋值时，filter属性还未完成赋值。需要在组件/指令的生命周期钩子（如ngOnInit、ngAfterContentInit）中处理，确保所有属性都已赋值完成。

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