angular - Angular - ng-content 上的模板参考

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实际上并不存在，并且我不能真正对其进行引用，因为该内容可以是多个元素，但是有没有办法以“角度方式”而不是使用蛮力，即原生元素？

score 3 · Accepted Answer

我认为您的问题可以通过@ContentChildren/@ContentChild 解决。它们与@ViewChildren/@ViewChild 相似，但@ContentChild 会查看ng-content 而@ViewChild 则不会。

 <input type="text" #myRef>

在打字稿文件中：

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

1 回答 1