Question

我正在构建一个属性指令，该指令应该获得多个模板，而这些模板又应包含用于过滤的额外数据，以便稍后用于选择所需的模板。所以我按如下方式扩展了TemplatePortalDirective：

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

  @Input() filter: string;

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

我的属性指令TemplateSelector有一个@Input，它也被用作属性选择器：

@Directive({
  selector: "[templateSelector]"
})
...
@Input("templateSelector") templates: FilterableTemplateDirective[]

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

<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>

因此，当我尝试从this.templates TemplateSelector中的某个方法访问TemplateRef时，我获取了数组，但它的类型为ng-template ，即普通FilterableTemplateDirective，没有额外的字段，但是当我调试时，我已经看到filter被构造了两次，在分配了模板的数组之前，<div templateSelector="[templateA as FilterableTemplateDirective, templateBtemplateA as FilterableTemplateDirective]"></div> 1}}也已分配，但过滤器的分配发生的时间晚于使用模板分配数组。我已经尝试过构建数组，如下所示：

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

左右：

as

这两个都没有成功，应用只是崩溃说它期待数组结束而不是class ActiveXControl { int MousePointer; VBUserControl control; } class VBUserControl { } class YourUserControl : VBUserControl { ActiveXControl UserControl; // we must use UserControl.MousePointer }或尖括号......

Answer 1

如果您的模板具有灵活性，那么您可以使用@ContentChildren实现所需目标，如下所示：

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

和您的templateSelector指令：

@Directive({
  selector: "[templateSelector]"
})

...

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

使用模板变量标记元素时，您无法告诉Angular您希望从该元素中获得什么。使用@ContentChildren，@ContentChild，@ViewChild和@ViewChildren等模板查询，您可以灵活地告诉Angular是否需要指令/组件，或{{ 1}}，或ElementRef（也许还有其他一些令牌）。

Answer 2

好吧，现在似乎答案显而易见并且表面上只是为了在exportAs添加Directive decorator属性，然后将参考分配给模板引用变量，非常相似到ngForm ...

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

2 个答案: