如何在 angular 中将数据从相同的多个子组件传递给父组件？

Question

我想将数据从多个相同的子组件传递到父组件。我怎样才能实现它。场景是我有一个日期选择器，我在父组件中循环了子组件。因此，当我 select 在所有子元素中设置日期时，我如何检索父组件中的日期，我的业务逻辑在父组件中进行服务调用。提前致谢。

Answer 1

您可以在父组件中为所有子组件及其各自的值保留一个数组。每当子组件中的日期值发生更改时，使用事件发射器将该值传递给父组件。请参阅以下示例：

Child.component.ts

import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.scss'],
})
export class ChildComponent {
  @Input() data: any;
  @Output('selectionChanged') eventEmitter: EventEmitter<any> =
    new EventEmitter<any>();
  constructor() {}

  onDateSelection(event: any) {
    const dateStr = event.target.value; //Pick date value
    this.eventEmitter.emit({ id: this.data.id, date: dateStr });
  }
}

Child.component.html

<p>id: {{ data.id }}</p>
<input type="date" (change)="onDateSelection($event)" />

App.component.ts（在您的情况下，这将是父组件）

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit {
  title = 'so-demo';
  children: any[];
  constructor() {
    this.children = [{ id: 1 }, { id: 2 }, { id: 3 }];
  }
  ngOnInit() {}

  dateSelectionChanged(data: any) {
    const { id, date } = data;
    this.children[id - 1].date = date;
    // Call your service here, I'm just gonna write to console
    console.log(this.children);
  }
}

App.component.html

<p>Hola! Select a few of below dates:</p>
<ng-container *ngFor="let c of children">
  <app-child
    [data]="c"
    (selectionChanged)="dateSelectionChanged($event)"
  ></app-child>
</ng-container>

Answer 2

您可以通过创建引用当前组件的提供程序来与 parent 组件对话。然后任何 child 都可以访问那个 parent。请参阅 Stackblitz.com.

上的完整代码

第一步是创建一个可以提供给您的 parent 并注入您的 children:

的令牌

export const PARENT_COMPONENT = new InjectionToken<ParentComponent>('ParentToken');

接下来在您的 parent 组件中添加一个引用自身的提供程序：

@Component({
  providers: [
    {
      provide: PARENT_COMPONENT,
      useExisting: forwardRef(() => ParentComponent),
    },
  ],
})
export class ParentComponent {}

然后在你的 children 中，注入 parent:

export class ChildComponent {
  constructor(
    @Inject(PARENT_COMPONENT) private readonly parent: ParentComponent
  ) {}
}

现在 child 可以访问所有 parent 的功能，并且 child 在组件中的深度无关紧要，它可以是 child 甚至是盛大 child（或更深）。

如何在 angular 中将数据从相同的多个子组件传递给父组件？

How to pass data from identical multiple child component to parent in angular?

parent-child

angular