Angular 如何影响儿童'；s以角度查看内容序列？

我有一个可重用的部分，它基于父级的输入在DOM中创建一些段落。它工作得很好，直到要求我考虑到段落的顺序。我用最明显的方法解决了它，然后继续前进

我的解决方案涉及ngIf，ngSwitch也可以同样使用：

父模板

<button (click)="orderisBADC()">Order BADC</button>
<button (click)="orderisBDCA()">Order BDCA</button>
<button (click)="orderisCBDA()">Order CBDA</button>
<app-child [order]="order"></app-child>

<div *ngIf="order === 'BADC'">
    <p>B</p>
    <p>A</p>
    <p>D</p>
    <p>C</p>
</div>
<div *ngIf="order === 'BDCA'">
    <p>B</p>
    <p>D</p>
    <p>C</p>
    <p>A</p>
</div>
<div *ngIf="order === 'CBDA'">
    <p>C</p>
    <p>B</p>
    <p>D</p>
    <p>A</p>    
</div>

子模板

<button (click)="orderisBADC()">Order BADC</button>
<button (click)="orderisBDCA()">Order BDCA</button>
<button (click)="orderisCBDA()">Order CBDA</button>
<app-child [order]="order"></app-child>

<div *ngIf="order === 'BADC'">
    <p>B</p>
    <p>A</p>
    <p>D</p>
    <p>C</p>
</div>
<div *ngIf="order === 'BDCA'">
    <p>B</p>
    <p>D</p>
    <p>C</p>
    <p>A</p>
</div>
<div *ngIf="order === 'CBDA'">
    <p>C</p>
    <p>B</p>
    <p>D</p>
    <p>A</p>    
</div>

但我可以很容易地想象将来会有更多可能的序列。如果段落本身不足以构成一个实体，甚至不能被视为一个单独的组成部分，那么有没有更聪明的方法来克服这一问题？提前感谢您的建议。：）

编辑：

我想澄清一些事情

A、B、C、D文本只是占位符。为了简化，让我们假设我们在child中的内容被分割为等效的块元素，但它们的内部可能会有所不同。有些可能有输入，其他的表格，最后还有一些是用文本填充的，但它绝不等于序列符号。独生子女决定每个元素内部的内容。问题仍然是：如何仅影响从父级到子级查看内容的顺序和/或存在性？

如何

在组件中：

orders = ['BADC', 'BDCA', 'CBDA'];

在模板中：

<button *ngFor="let order of orders" (click)="setOrder(order )">Order {{order}}</button>
<app-child [order]="order"></app-child>

<div>
  <p *ngFor="let item of order">{{ item }}</p>
</div>

Order{{Order}

子模板：

<button *ngFor="let order of orders" (click)="setOrder(order )">Order {{order}}</button>
<app-child [order]="order"></app-child>

<div>
  <p *ngFor="let item of order">{{ item }}</p>
</div>

{{item}

举个例子，在父组件中准备数据并按原样传递给子组件可能更有意义：

export class HomeComponent {
  items = ['B', 'D', 'C' , 'A']; // default order

  orderIsBADC() {
    this.items = ['B', 'A', 'D' , 'C'];
  }
  orderIsBDCA() {
    this.items = ['B', 'D', 'C' , 'A'];
  }
  orderIsCBDA() {
    this.items = ['C', 'B', 'D' , 'A'];
  }
}

在模板中，您可以像以前一样传递它：

<app-child [items]="items"></app-child>

按字母顺序排序：

sortData(array: Array<number | string>): Array<number | string> {
    return array.sort((a, b) => a < b ? -1 : 1);
}

sortData（数组：数组）：数组{
返回数组.sort（（a，b）=>a
谢谢。如果涉及到按钮的话，那就非常麻烦了。但这只是为了将输入进一步传递给孩子而被嘲笑。实际上，不同的父母使用这个子组件。它们决定子元素中元素的顺序和存在。如果所有这些元素（这里是段落）实际上包含不同的内容，例如文本、输入、表格等等，该怎么办？有没有办法以正确的顺序查看正确的文本？编辑了我的问题。在组件中，您应该更改：顺序：['BADC'，'BDCA'，'CBDA']；ToOrders=['BADC'、'BDCA'、'CBDA']。以A、B、C、D表示的内容是占位符。如前所述，许多不同的组件使用这个可重用组件，它们必须影响序列，不能真正决定子组件本身的内部内容。我编辑了我的问题来澄清一下。因此，如果您的数据是从父级传递到子级的，您是否能够按照我在父级组件中描述的那样处理它？问题是，我传递的唯一内容是一个标志（顺序），它应该决定DOM中元素的顺序，不是它们的实际内容。在这种情况下，您需要某种程度的泛化，这意味着您可以传递诸如“ASC”和“DESC”之类的常量标志。