角度 - 关于 ng 内容的模板参考

Question

我需要在 Angular 应用程序中围绕输入渲染动态内容。

我的想法是创建自定义组件，然后使用ng-content将行为绑定到该输入。这样：

<my-wrapper>
<input type="text" otherAttributes...>
</my-wrapper>

我的包装器如下所示。

.HTML：

<span>
<ng-content #myRef></ng-content>
<button (click)="perform(myRef)">Click me!</button>
</span>

和.ts功能：

perform(myRef: HTMLIntpuElement) {
myRef.value = 'something else';
}

现在，我知道ng-content实际上并不存在，而且我不能真正引用它，因为该内容可以不止一个元素，但是有没有办法以"角度方式"获得它，而不是使用蛮力即本机元素？

Answer 1

我认为您的问题可以通过@ContentChildren/@ContentChild解决。 它们与@ViewChildren/@ViewChild相似，但@ContentChild研究ng内容，而@ViewChild则不然。

<input type="text" #myRef>

在打字稿文件中：

@ContentChildren('myRef') items: QueryList<ElementRef>;