Как создать несколько компонентов с одинаковой логикой или 1 компонент с несколькими шаблонами?

Question

Я создал компонент строки заголовка для данных в виде таблицы в отчете, который позволяет сортировать по нескольким столбцам. Это довольно просто: одно свойство, две функции и @Output (), чтобы сообщить родительскому компоненту, когда порядок изменился.

Я бы хотел сейчас использовать этот компонент во всех других моих отчетах - у каждого будет одна и та же логика, но у каждого будет свое отображение.

Я знаю, чем могу добавить @Input () для reportType, а затем код * ngSwitch в моем шаблоне, но я бы хотел найти способ фактически изолировать HTML для каждого заголовка в свой собственный файл (возможно, со своим собственным файлом SCSS) без создания набора компонентов с точно такой же логикой.

Эта логика включена ниже просто для удовольствия.

import { Component, EventEmitter, Output } from '@angular/core';

@Component({
  selector: 'sort-row',
  templateUrl: './sort-row.component.html',
  styleUrls: ['./sort-row.component.scss']
})
export class SortRowComponent {

  sortOrder: string[] = [];

  @Output() sortChanged: EventEmitter<string[]> = new EventEmitter<string[]>();

  constructor() {}

  sortingBy(field, dir?) {
    if (dir) {
      if (dir === 'desc') {
        field = '-' + field;
      }
      return this.sortOrder.indexOf(field) !== -1;
    } else {
      return this.sortOrder.indexOf(field) !== -1 || this.sortOrder.indexOf('-' + field) !== -1;
    }

  }

  toggleSortCol(col, evt) {

    const ascIdx = this.sortOrder.indexOf(col);
    const descIdx = this.sortOrder.indexOf('-' + col);

    if (!evt.shiftKey) {

      if (ascIdx !== -1) {
        this.sortOrder = ['-' + col];
      } else if (descIdx !== -1) {
        this.sortOrder = [col.replace('-', '')];
      } else {
        this.sortOrder = [col];
      }

    } else {

      if (ascIdx !== -1) {
        this.sortOrder[ascIdx] = '-' + col;
      } else if (descIdx !== -1) {
        this.sortOrder[descIdx] = col.replace('-', '');
      } else {
        this.sortOrder.push(col);
      }
    }

    this.sortChanged.next(this.sortOrder);
  }
}

Answer 1

Таким образом, если вы хотите, чтобы несколько компонентов использовали одну и ту же логику, но с разными наценками, вам нужно просто создать другой компонент. Расширьте один с помощью логики. И использовать все преимущества ООП (наследуемые реквизиты и методы).

Answer 2

Я думаю, что вы можете просто добавить новый @Input() customCSSClasses: Object к вашему универсальному компоненту и передать новые CSS-классы из хост-компонента и использовать ngClass на выбранных элементах, чтобы применить эти пользовательские классы (вам нужно добавить эти пользовательские классы в ваш глобальныйstyles.css файл.)

Например:

// Host component.html
<sort-row [customCSSClasses]="{input: 'dark-input', select: 'dark-lg-select'}" 
          // the other config
></sort-row>


// sort-row component.ts
@Input() customCSSClasses?: Object;

// sort-row component.html
<input [ngClass]="customCSSClasses?.input ? customCSSClasses?.input : 'default-input'">
<select [ngClass]="customCSSClasses?.select ? customCSSClasses?.select : 'default-select'"></select