javascript - Hierarki for flere komponenter i Angular?

Når det gjelder dette spørsmålet har jeg sett på siden for Master/Detail-komponenter, men det er ikke nok informasjon om dette. I tillegg finnes det også en annen flott veiledning for Angular-mappehierarki på Angular Folder Structure, men den dekker heller ikke spørsmålet mitt.

Jeg har tre komponenter (la oss kalle dem) ComponentA, ComponentB og ComponentC, og jeg ønsker å slå dem alle sammen i en annen komponent kalt ComponentX, som vist på bildet. Siden dataene er forskjellige for hver av de tre komponentene, må jeg skille dem alle med tre komponenter med følgende hierarki:

-KomponentX (mappe)

    -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 ???

Er denne hierarki-tilnærmingen korrekt? På den annen side, hvis Komponent X bare er et panel, kan vi bruke componentX.model.ts hvis en modell av data som brukes for generell bruk for alle 2 eller 3 komponenter (A, B og C) må hentes? Hvilken tilnærming bør jeg følge? Og hva er den beste måten for å dele data mellom to komponenter, dvs. master-detalj? tjeneste eller input-output tilnærming? Enhver hjelp ville bli satt pris på...

Svar #1

Jeg forteller deg hvordan jeg ville ha gjort det, men det er subjektivt, så vurder å bruke dette hvis det passer for deg, ellers kan du gjerne bruke noe annet.

Det jeg ville gjort er å lage et grensesnitt (eller hvis komponentene er nesten identiske, en superklasse) slik:

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

Nå må komponentene dine implementere det, og de kan alle bruke samme mal/stil :

@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'];
}

På denne måten vil alle komponentene dine bli tvunget til å ha egenskapene til grensesnittet ditt, og siden egenskapene vil forbli de samme, vil du bare trenge én mal/CSS-fil.

Mappestrukturen ville se slik ut (igjen, hvis det var mitt problem):

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