Внезапно, совсем в другом проекте, мне нужно было сделать наследование компонентов. Так как я не очень люблю катпастить и потом пять раз бегать по коду и менять схожие функции. Но другой проект — уже большой и сложный, поэтому в упрощенном варианте на текущем демопроекте и будет показано как собственно по-быстрому отнаследовать схожие функции и не заниматься мутотенью потом. Репозиторий примера BlogDemo.
Создание второго компонента
Чтобы было на чем показывать — давайте к блогу сделаем таблицу комментов. Прямо и тупо скопировав уже существующую схему — джейсон, структура данных и компонент (см. предыдущий пример)
api/second.json
second/second.data.ts
second/second.component.ts
main.ts
Не забудем дописать инициализацию и вставить в шаблон
Избавление от копипаста
Как мы видим — у компонента второго только тип данных и ссылка отличаются… а добавим пейджинг, сортировку и тд — и что, в каждом из них копировать? на это мы пойти не можем — будем упрощать — введем еще два класса
basic/basic.data.ts
basic/basic.data.ts
basic/basic.component.ts
Внимание, пример который хочется написать по аналогии с php — писать нельзя, консоль.лог выведет пустое значение
basic/basic.component.ts
Перепишем наши компоненты с наследованием
app.component.ts
second/second.component.ts
Что должно выйти в итоге — мухи отдельно, котлеты отдельно, красота и эс
Есть проблема, что метаданные не наследуются. Например, если мы заходим template родительского оставить без изменений или обернуть в свой тег, то это не получится сделать. Если знаете как сделать, будет здорово дополнить статью.
к сожалению прямо темплейты — нет, но можно 1) вынести темплейт в файл и использовать один файл и там и там 2) вынести его в директиву… нужно посмотреть на 4ый ангуляр — возможно эту проблему там решили, у меня на продакшен проектах по факту вообще ни разу не стала необходимость шаблоны отнаследовать