Angular - шаблон ссылки на нг-контент

Question

Мне нужно визуализировать динамическое c содержимое вокруг ввода в 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 путь ", вместо использования грубой силы, то есть нативный элемент?

Answer 1

Я думаю, что ваша проблема решаема с помощью @ ContentChildren / @ ContentChild. Они похожи с @ ViewChildren / @ ViewChild, но @ContentChild изучает ng-контент, а @ViewChild - нет.

 <input type="text" #myRef>

и в машинописном файле:

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