时间戳

首页 > 解决方案 > 是否有语法糖用于将子元素作为模板传递给角度组件（2+）

angular - 是否有语法糖用于将子元素作为模板传递给角度组件（2+）

问题描述

我目前正在寻找一种在将模板传递给角度组件时减少噪音的方法。

考虑以下代码：

<parent>
  <ng-template #child1><div>Test</div></ng-template>
  <ng-template #child2><div>Test</div></ng-template>
</parent>

是否可以创建一个或多或少可以像这样使用的结构指令？

<parent>
  <div *asTemplate="#child1">Test</div>
  <div *asTemplate="#child2">Test</div>
</parent>

以便

<div *asTemplate="#child1">Test</div>

脱糖

<ng-template #child1><div>Test</div></ng-template>

直接使用

<div *asTemplate #child1>Test</div>

不起作用，因为 ref "child1" 引用了 div 而不是模板。

多谢！

标签： angular

解决方案

最简单的做法是将模板作为输入绑定传递。它允许您定义多个输入，并且不需要组件内部的任何复杂内容来呈现它们。

<parent [itemA]="childA" [itemB]="childB"></parent>
<ng-template #childA>Test A</ng-template>
<ng-template #childB>Test B</ng-template>

模板在结构上独立于 HTML。您需要<ng-template>在 Html 元素内定位的唯一原因是访问作用域模板变量。否则，将<ng-tempalte>.

是否可以创建一个或多或少可以像这样使用的结构指令？

您可以使用结构指令将模板引用转发到使用依赖注入器的父组件。您将注入父级，然后在父级上调用一个方法来转发引用。

<parent>
   <div *child></div>
</parent>

子指令将使用函数回调将模板引用传递给父级（即setChildTemplate）

@Directive({selector: '[child]'})
export class ChildDirective implements OnDestroy {
    constructor(tempRef: TemplateRef<any>,
                private parent: ParentComponent) {
       this.parent.setChildTemplate(tempRef);
    }

    ngOnDestroy() {
       this.parent.setChildTemplate(null);
    }
}

推荐阅读