Angular 将模板引用变量绑定为属性指令类型

我正在构建一个属性指令，该指令应该获得多个模板，这些模板应该包含用于筛选的额外数据，这些数据稍后将用于选择所需的模板。 因此，我对TemplatePortalDirective进行了如下扩展：

@Directive({
  selector: "[filter]ng-template"
})
export class FilterableTemplateDirective extends TemplatePortalDirective {

  @Input() filter: string;

  constructor(templateRef: TemplateRef<any>, viewContainerRef: ViewContainerRef
  {
    super(templateRef, viewContainerRef);
  }
}

<div templateSelector>
  <ng-template filter="div[data-type-a]">
    ...
  </ng-template>
  <ng-template filter="div[data-type-b]">
    ...
  </ng-template>
</div>

现在，假设我有以下模板：

<div templateSelector="[templateA, templateB]"></div>
<ng-template filter="div[data-type-a]" #templateA>
...
</ng-template>
<ng-template filter="div[data-type-b]" #templateB>
...
</ng-template>

大约：

<div templateSelector="[<FilterableTemplateDirective>templateA, <FilterableTemplateDirective>templateBtemplateA]"></div>

---

这两种方法都没有成功，应用程序只是崩溃了，说它希望数组结束，而不是像或尖括号那样…

如果你的模板具有灵活性，那么你可以使用以下方法实现你想要的：

@Directive({
  selector: "[filter]ng-template"
})
export class FilterableTemplateDirective extends TemplatePortalDirective {

  @Input() filter: string;

  constructor(templateRef: TemplateRef<any>, viewContainerRef: ViewContainerRef
  {
    super(templateRef, viewContainerRef);
  }
}

<div templateSelector>
  <ng-template filter="div[data-type-a]">
    ...
  </ng-template>
  <ng-template filter="div[data-type-b]">
    ...
  </ng-template>
</div>

---

当使用模板变量标记元素时，您的局限性在于无法告诉Angular您想要从该元素中得到什么。使用诸如

@ContentChildren

、

@ContentChildren

、

@ViewChildren

和

@ViewChildren

等模板查询，您可以灵活地告诉Angular您是否需要它的指令/组件，或者

ElementRef

，或者

ViewContainerRef

（以及一些其他令牌）。

，现在看来答案是显而易见的，而且是显而易见的-只需在

指令装饰器上添加
exportAs
属性，然后将引用分配给模板引用变量，非常类似于
ngForm
。
是的，肯定是一个选项，但这不是灵活性的问题，而是逻辑性的问题，如果可能的话，我更愿意将模板放在目标元素之外。。。
@Directive({
  selector: "[templateSelector]"
})

...

@ContentChildren(FilterableTemplateDirective) 
templates: QueryList<FilterableTemplateDirective>;