Как автоматизировать «копипасту» во front-end Angular 4?

Question

[Urukhayy]

В приложении на Angular 4 очень много похожих компонентов , во многих из них таблицы с данными и одинаковые кнопочки по удалению, добавлению и редактированию этих таблиц. Также похожи и формы по созданию записей таблиц (плюс-минус пару полей). И для того чтобы сделать все разделы приложения, приходится пачками копировать эти компоненты и просто изменять их названия, так как 70% начинки файлов одинаковое, разные лишь количество полей и названия переменных. Как можно автоматизировать рутинные процессы? Какая архитектура не имеет "копипасты"?
При этом имеется Angular-CLI, но все равно придется копипастить код из других компонентов.

Answer 1

[0X12eb]

Вы почти ответили сами на свой вопрос.
Реализуйте абстрактные компоненты, будь то формы или таблицы с настраиваемым функционалом (необходимые параметры передавайте в компонент инпутом, колбеки возвращайте оутпутом)
Если требуются уникальные случаи абстрактных компонентов - наследуйтесь от ранее созданных и уже реализуйте уникальную часть для них.
В итоге у Вас получится один абстрактный компонент. скажем, для таблиц где Вы прогоните все параметры, пришедшие из родительского компонента и отрендерите его, постепенно будете дописывать общие компоненты по мере необходимости.
В конце концов будут настраиваемые компоненты модалок, нотификаторов, аплоадеров, таблиц, форм и т.д. Которые заинкапсулируют в себе весь необходимый функционал и принимающие лишь настройки для тех или иных случаев реализаций.

Answer 2

[Ярослав Сиваков]

К сожалению, в Angular 2+ не предусмотрено механизма наследования компонентов. Поэтому - либо универсальные компоненты, которые "могут всё" и настраиваются через параметры, либо бейте ваши компоненты на более мелкие и делайте много разных компонентов из этих маленьких (т.е. решайте вопрос через агрегацию).

Comments

[0X12eb]

К сожалению, в Angular 2+ не предусмотрено механизма наследования компонентов.

Если Вы этого не знаете - это не означает что этого нет...

base component

import { Component, Input, Output, EventEmitter } from '@angular/core';
import { Employee } from './interfaces';

@Component({
  selector: 'app-employee',
  template: ''
})
export class EmployeeComponent {
  @Input() employees: Employee[] = [];
  @Output() select = new EventEmitter();

  heading = 'Employees';

  selectEmployee(employee: Employee) {
    this.select.emit(employee);
  }
}

inheritance child component

import { Component } from '@angular/core';
import { EmployeeComponent } from './employee.component';

@Component({
  selector: 'app-employee-list',
  template: `
    <h1>{{heading}}</h1>
    <ul>
      <li *ngFor="let employee of employees">
        {{employee.firstName}} {{employee.lastName}} <br>
        {{employee.email}} <br>
        <button (click)="selectEmployee(employee)">Select</button>
      </li>
    </ul>
  `
})
export class EmployeeListComponent extends EmployeeComponent {
  heading = 'Employee List';
}

another inheritance component

import { Component } from '@angular/core';
import { EmployeeComponent } from './employee.component';

@Component({
  selector: 'app-employee-table',
  template: `
    <h1>{{heading}}</h1>
    <table>
      <tr>
        <td>First Name</td>
        <td>Last Name</td>
        <td>Email</td>
      </tr>
      <tr *ngFor="let employee of employees">
        <td>{{employee.firstName}}</td>
        <td>{{employee.lastName}}</td>
        <td>{{employee.email}}</td>
        <td><button (click)="selectEmployee(employee)">Select</button></td>
      </tr>
    </table>
  `
})
export class EmployeeTableComponent extends EmployeeComponent { }

using all

<app-employee-list 
  [employees]="employees"
  (select)="selectEmployee($event)"></app-employee-list>
  
<app-employee-table
  [employees]="employees"
  (select)="selectEmployee($event)"></app-employee-table>

Всё прекрасно работает, хз почему Ваш Angular2+ не предусматривает наследование
В качестве бонуса: plnkr

[Ярослав Сиваков]

Для меня наследование классов - ещё не наследование компонентов. Вот посмотрите, например, как это сделано в HaQuery: помимо наследования кода можно также переиспользовать/расширять HTML-шаблон и частично/полностью переопределять CSS компонента. Также, при наследовании, сохраняется мета-информация о компоненте.

Но я, конечно, плохо разбираюсь в этом... Всего-то десяток лет работы архитектором.. Не то, что вы - наверняка у вас лет 20 опыта! :)

[0X12eb]

Ярослав Сиваков: сарказм засчитан.

[denismaster]

Ярослав Сиваков, с Angular 2.3 сохраняется метаинформация о компоненте, можно спокойно наследоваться с сохранением шаблона, либо менять шаблон.

[Ярослав Сиваков]

denismaster, спасибо, не знал! :)