У меня есть родительский компонент, который отображает несколько различных типов дочерних компонентов на основе типов моделей данных.
Кроме того, конструкция требует, чтобы родительский элемент содержал элементы действий, которые выполняются с данными дочерних компонентов, и эти действия зависели от типов дочерних компонентов.
У действий есть две вещи: значок, обозначающий тип действия, и функция-обработчик. Функция-обработчик находится в дочернем компоненте.
Как предоставить родительскому элементу все действия для определенного типа компонента chils?
Единственный способ, который я могу придумать, - это заставить все дочерние компоненты реализовывать интерфейс с помощью:
Есть ли более элегантный способ добиться этого?
🤔 А знаете ли вы, что...
Angular имеет собственную систему маршрутизации для управления переходами между страницами в одностраничных приложениях.
Родитель может знать все о дочерних элементах, используя ссылочную переменную шаблона.
<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')
}
Вы также можете использовать тему в родительском компоненте и подписаться на все дочерние компоненты.