Как неявно раскрыть @inputs и @outputs дочернего компонента для прародителя в Angular?

Question

Обзор:

Я просто пытаюсь понять, как правильно справиться с этим сценарием.Скажем, я хочу
создать собственную версию компонента (скажем, элемент выбора фруктов), используя существующий компонент (скажем, mat-select).Теперь предположим, что существующий компонент предоставляет набор @inputs и @outputs, который мой компонент не "повторно предоставляет" своим собственным потребителям.

Что если бы теперь были приложения, которые хотели бы использовать мой пользовательскийкомпонентов, но также хотел использовать «нижний» компонент @inputs/@outputs?

Вот пример того, что я пытаюсь передать:

В этом примере скажем, что я создал FruitSelect компонент, который состоит из MatSelect + some custom behavior around it.Но для этого примера я намеренно не выставил placeholder @Input, предоставляемый MatSelect.

Как приложение, которое хочет использовать FruitSelect в своем представлении, может указать placeholder?

Опции, которые я мог бы придумать:

1. Пройдите через класс MatSelect и вручную повторно откройте все @Inputs и @Outputs,Для @Outputs мне придется написать методы-обертки, которые просто распространяют события.
2. Сделать мой FruitSelect extension MatSelect, чтобы он неявно имел доступ к своему *Интеракторы 1048 *.Хотя это кажется дизайнерским первым решением, которое приходит на ум, не уверен, что это легко выполнимо.Поиск в Google не показал, что многие люди делают это, так что не уверен.

Answer 1

Итак, насколько я вижу, у вас есть 2 варианта, которые вы описали.По своему опыту могу сказать, что Я видел наследование компонентов в использовании только один раз , у него много недостатков - это приносит другой уровень сложности (огромный) , этоне наследует шаблон и проверяет, что вы унаследуете от MatSelect в свой дочерний компонент ( ~ 30 открытых полей ).

---

Таким образом, в случае наследования , вы получите компонент, который имеет много бессмысленных полей внутри + вам все еще нужно будет свяжите все выходные данные с унаследованными триггерами событий (опять же , потому что шаблон не наследуется ).

---

С другой стороны, вам нужен только заполнитель вход, так что вы можете просто повторно выставить его .Это также имеет смысл для вашего компонента, но не все поля MatSelect имеют значение для FruitSelect , поэтому вы можете выбрать, какие из них вы хотите повторно выставить.

---

Говоря о мое мнение , я бы определенно предпочел второй вариант ( переэкспонирование ).Надеюсь, это поможет.