Angular Parent 到 Child-in-Array 通信

Question

我有一个由父组件控制的动态表单，带有一组子 DTO，使用 ngFor 呈现，这些子组件通过 DTO 并使用它们自己的模板。比如：

父 HTML：

<div class="row parameter-list" *ngFor='let parameter of parameters'>
  <div class="col-md-12">
    <parameter-list-item
    [parameter]="parameter"
    [types]="types"
    [events]="eventsSubject.asObservable()"
    (onDelete)="onDeleteHandler($event)">
    </parameter-list-item>
  </div>
</div>

父组件：

@Input()
parameters: Parameter[];

儿童 HTML：

<input type="text" [(ngModel)]="parameter.Name" [disabled]="readonly">
<input type="text" [(ngModel)]="parameter.Description" [disabled]="readonly">

子组件：

constructor() {
  this.readonly = true;
}

readonly: boolean;

@Input()
parameter: Parameter;

DTO：

export class Parameter {
   Name: string,
   Description: string) { }
}

当我想更改列表时，通过向父组件添加参数，我正在使用（单击）处理程序执行以下操作：

  addParameter(): void {
    console.log("ParameterListComponent.addParameter()");
    let name = "Name" + this.parameters.length;

    let parameter = new Parameter(
      name,
      "Description");

    this.parameters.unshift(parameter);
  }

基本上让 unshift 触发正确的生命周期钩子等等。

我需要知道的是，我是否可以以某种方式与新创建的子组件进行通信并将它的只读布尔值设置为 false..

Answer 1

我想出了一个不错的解决方案；我最终只是将父级中的数组拆分为 2：

  parametersToAdd: Parameter[];

  @Input()
  parameters: Parameter[];

然后我将我的父 html 更改为如下所示：

<div class="row parameter-list" *ngFor='let parameterToAdd of parametersToAdd'>
  <div class="col-md-12">
  <parameter-list-item
    [parameter]="parameterToAdd"
    [types]="types"
    [readonly]="false"
    (onDelete)="onDeleteHandler($event)"
  ></parameter-list-item>
  </div>
</div>

<div class="row parameter-list" *ngFor='let parameter of parameters'>
  <div class="col-md-12">
    <parameter-list-item
    [parameter]="parameter"
    [types]="types"
    [readonly]="true"
    (onDelete)="onDeleteHandler($event)"
    ></parameter-list-item>
  </div>
</div>

添加点击处理程序现在看起来像：

addParameter(): void {
  console.log("ParameterListComponent.addParameter()");
  let name = "Name" + this.parameters.length;

  let parameter = new Parameter(
    name,
    "Description",
    null,
    new Array(),
    new ParameterTypeInfo(ParameterDataType.Boolean, null, null, new 
    Array(),null, null));

  this.parametersToAdd.unshift(parameter);
}

基本上有 2 个集合，它们在应用运行时呈现为相同的外观。我需要这样做是因为我们的后端 API 不允许您编辑 DTO 中的所有字段，只能编辑其中的一些。因此，对于页面加载时从后端 API 提取的现有记录，我需要子组件处于“只读”模式。相反，如果你想添加一个新的参数，那么你可以做任何你想做的事情......所以基本上现有的记录不能对它们进行很多更改，并且大多数字段需要处于只读模式，任何新记录都可以写入模式，直到您保存它们。然后它们被 POST 并且页面应该在只读集合中刷新它们。

Answer 2

有许多种方式可以在父母和孩子之间交流信息。

这里有几个：

正如另一张海报所提到的，您可以使用@ViewChild 来获取对子组件的引用并设置它的属性。

另一个选项（如上所示）是使用onChanges 生命周期挂钩。您可以使用它来监视任何 Input 属性的更改。因此，您可以观察 Parameter 的更改，并让孩子根据该参数更改自行设置 readonly 标志。

另一种选择是构建一个服务来管理标志，让父设置标志值，让子标志读取它。

对于更大或更复杂的应用程序，您可以考虑使用 NgRx 进行这种通信。 NgRx 是一个状态管理库，用于管理数据更改和通知。

希望这会有所帮助。