Angular

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 实际上并不存在，而且我不能真正对其进行引用，因为该内容可能不止一个元素，但是有没有办法找到它 "Angular way"，而不是使用蛮力，即原生元素？

Answer 1

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

 <input type="text" #myRef>

在打字稿文件中：

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

Angular - ng-content 的模板参考