Иерархия для нескольких компонентов в Angular?

Question

Относительно этого вопроса я смотрю на страницу Master / Detail Components , но информации об этом недостаточно. В дополнение к этому есть еще один замечательный учебник по иерархии угловых папок на Структура угловых папок , но он также не охватывает мой вопрос.

У меня есть три компонента (назовем их) ComponentA, ComponentB и ComponentC, и я хочу объединить их все в другие компоненты с именем ComponentX, как показано на рисунке. Поскольку данные отличаются для каждого из 3 компонентов, мне нужно разделить их всех на 3 компонента со следующей иерархией:

-ComponentX (папка)

    -ComponentA (folder)
        -componentA.html
        -componentA.ts
        -componentA.model.ts

    -ComponentB (folder)
        -componentB.html
        -componentB.ts
        -componentB.model.ts

    -ComponentC (folder)
        -componentC.html
        -componentC.ts
        -componentC.model.ts

    -componentX.html
    -componentX.ts
    -componentX.model.ts ???

Является ли этот иерархический подход правильным? С другой стороны, если Компонент X является просто панелью, можем ли мы использовать componentX.model.ts, если необходимо получить данные модели, которые используются для общего назначения для всех 2 или 3 компонентов (A, B и C)? Какой подход я должен следовать? И каков наилучший способ обмена данными между двумя компонентами, т. Е. Master-detail? сервис или подход ввода-вывода? Любая помощь будет оценена ...

Answer 1

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

Что я хотел бы сделать, это создать интерфейс (или, если компоненты почти идентичны, суперкласс), например:

export interface ComponentX {
  title: string;
  data: any[];
  headers: string[];
}

Теперь ваши компоненты должны реализовать это, и все они могут использовать один и тот же шаблон / стиль:

@Component({
  selector: 'comp-A',
  templateUrl: '../component-X.component.html',
  styleUrls: ['../component-X.component.scss']
})
export class ComponentA implements ComponentX {
  title = 'Component A';
  data = [];
  headers = ['ID', 'full name', 'phone number'];
}

Таким образом, все ваши компоненты будут вынуждены иметь свойства вашего взаимодействия, и поскольку свойства останутся прежними, вам потребуется только один шаблон / файл CSS.

Структура папок будет выглядеть так (опять же, если бы это была моя проблема):

ComponentX
|
|- componentX.component.html
|- componentX.component.ts
|- componentX.component.scss
|
|- ComponentA
|  |- componentA.component.ts
|
|- ComponentB
|  |- componentB.component.ts
|
|- ComponentC
   |- componentC.component.ts