Angular中多个组件的层次结构？

Question

关于这个问题，我看了Master/Detail Components页，但是没有足够的信息。除此之外，Angular Folder Structure上还提供了另一个有关Angular文件夹层次结构的出色教程，但这也没有涵盖我的问题。

我有三个组件（我们称它们为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只是一个面板，如果需要检索用于2个或3个组件（A，B和C）的所有组件的通用模型数据，我们可以使用componentX.model.ts吗？我应该采取哪种方法？为了在两个组件（即主从细节）之间共享数据的最佳方法是什么？服务还是投入产出方法？任何帮助将不胜感激...

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