Как передать элементы действий от дочернего элемента к родительскому?
У меня есть родительский компонент, который отображает несколько различных типов дочерних компонентов на основе типов моделей данных.
Кроме того, конструкция требует, чтобы родительский элемент содержал элементы действий, которые выполняются с данными дочерних компонентов, и эти действия зависели от типов дочерних компонентов.
У действий есть две вещи: значок, обозначающий тип действия, и функция-обработчик. Функция-обработчик находится в дочернем компоненте.
Как предоставить родительскому элементу все действия для определенного типа компонента chils?
Единственный способ, который я могу придумать, - это заставить все дочерние компоненты реализовывать интерфейс с помощью:
- свойство, представляющее действия, которые могут быть выполнены (значок и ключ события)
- входная переменная, в которой должно быть выполнено действие по клику
Есть ли более элегантный способ добиться этого?
Вы не думали использовать для этого «почему context api»?
@ThomasRenger Мне нравится идея регистрации сервиса при загрузке дочернего компонента. Не могли бы вы подробнее рассказать об идее аннотаций компонентов?
@DerekRoberts Нет. Я не уверен, что вы подразумеваете под контекстным API? это что-то вроде контекста реакции?
@DerekRoberts Я знаком с этим в реакции, но я должен администратором, я не в Angular. Не могли бы вы указать мне на некоторые документы по этому поводу?
@tlzg вот документация Если вы этого хотите, я могу составить для вас концепцию.
@DerekRoberts спасибо за ссылку, но это реакция. Я понимаю идею, но хочу придерживаться угловых решений. Если бы мне нужна была такая реализация, тогда подходящим вариантом было бы совместное обслуживание/стора.
Вы можете сохранить ссылку на дочерний компонент или переместить логику в сервис. В любом случае, некоторые фрагменты кода были бы очень полезны, чтобы прояснить, чего вы хотите.
Ответы 1
Родитель может знать все о дочерних элементах, используя ссылочную переменную шаблона.
<button (click) = "child.doSomething('accion')"> //<--doSomething is defined in child
</button>
<child #child></child>
Вы также можете использовать viewChild, и, как вы говорите, все дочерние элементы «расширяются» из интерфейса, вы можете использовать
@ViewChild('child',{read:CommonInterface}) component!:CommonInterface
click(){
this.component.doSomething('accion')
}
Вы также можете использовать тему в родительском компоненте и подписаться на все дочерние компоненты.
да, это такой подход. Тема также является вариантом. На самом деле у меня есть хранилище сигналов, поэтому я могу предоставить его в родительском компоненте и использовать. Спасибо!
Не уверен, что понял правильно. Но я вижу две вещи, которые я бы попробовал: аннотацию компонента, саморегистрацию службы (служба предоставляется не в корне, а в родительском компоненте) при загрузке компонента, регистрацию действий в службе... и отмену регистрации при выгрузке.