Angular2: наследование компонентов

Внезапно, совсем в другом проекте, мне нужно было сделать наследование компонентов. Так как я не очень люблю катпастить и потом пять раз бегать по коду и менять схожие функции. Но другой проект — уже большой и сложный, поэтому в упрощенном варианте на текущем демопроекте и будет показано как собственно по-быстрому отнаследовать схожие функции и не заниматься мутотенью потом. Репозиторий примера 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

Что должно выйти в итоге — мухи отдельно, котлеты отдельно, красота и эс

два компонента на одной странице Angular 2

2 комментария “Angular2: наследование компонентов”

  1. Святослав

    Есть проблема, что метаданные не наследуются. Например, если мы заходим template родительского оставить без изменений или обернуть в свой тег, то это не получится сделать. Если знаете как сделать, будет здорово дополнить статью.

    Ответить
    • к сожалению прямо темплейты — нет, но можно 1) вынести темплейт в файл и использовать один файл и там и там 2) вынести его в директиву… нужно посмотреть на 4ый ангуляр — возможно эту проблему там решили, у меня на продакшен проектах по факту вообще ни разу не стала необходимость шаблоны отнаследовать

      Ответить

Оставить комментарий turtus

Нажмите, чтобы отменить ответ.

XHTML: Вы можете использовать такие теги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre lang="" line="" escaped="" cssfile="">