Angular — ссылка на шаблон на ng-content

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


person dzenesiz    schedule 07.02.2020    source источник
comment
вы можете посмотреть stackoverflow.com/questions/ 38408912/как получить доступ к содержимому   -  person Caro    schedule 07.02.2020


Ответы (1)


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

 <input type="text" #myRef>

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

 @ContentChildren('myRef') items: QueryList<ElementRef>;
person Péter    schedule 07.02.2020