在子组件（Angular）发出 selectAll 和 unSelectAll 事件后在父组件中获取结果

Question

您好，我现在正在使用 ng-multiselect-dropdown(https://www.npmjs.com/package/ng-multiselect-dropdown) 使用 Angular 构建多选下拉菜单。

我通过事件发射器使用父子组件通信： 在 child.component.ts 中：

import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
import {IDropdownSettings} from 'ng-multiselect-dropdown';

export interface IMultiDropdownConfig {
  placeholder: string;
  header: string;
  dropdownSettings: IDropdownSettings;
}

@Component({
  selector: 'app-multi-dropdown',
  templateUrl: './multi-dropdown.component.html',
  styleUrls: ['./multi-dropdown.component.scss']
})
export class MultiDropdownComponent implements OnInit {

  @Input() dropdownItems: any[];

  @Input() selectedItems;

  @Input() header: string;

  @Input() placeholder: string;

  @Input() dropdownSettings: IDropdownSettings;

  @Input() loading;

  @Output() itemSelectEvent = new EventEmitter();

  @Output() itemDeselectEvent = new EventEmitter();

  @Output() selectAllEvent = new EventEmitter();

  @Output() deselectAllEvent = new EventEmitter();

  @Output() selectedItemsChange = new EventEmitter();

  constructor() { }

  ngOnInit(): void {
  }

  onSelectItem(event) {
    this.selectedItemsChange.emit(this.selectedItems);
  }
  onDeselectItem(event) {
    this.selectedItemsChange.emit(this.selectedItems);
  }
  onSelectAll(event) {
    this.selectedItemsChange.emit(this.selectedItems);
  }

  onDeselectAll(event) {
    this.selectedItemsChange.emit(this.selectedItems);
  }
}

在 child.component.html 中：

<div class="multi-dropdown-item">
  <div class="multi-dropdown-header">{{header}}</div>
  <div *ngIf="!this.loading" class="multi-dropdown-body">
    <ng-multiselect-dropdown
      [placeholder]="placeholder"
      [data]="dropdownItems"
      [(ngModel)]="selectedItems"
      [settings]="dropdownSettings"
      (onSelect)="onSelectItem($event)"
      (onDeSelect)="onDeselectItem($event)"
      (onSelectAll)="onSelectAll($event)"
      (onDeSelectAll)="onDeselectAll($event)">
    </ng-multiselect-dropdown>
  </div>
</div>

然后在parent.component.html中：

          <app-multi-dropdown
            [loading]="filterPropertiesMap.get(filterEntry).loading"
            [dropdownItems]="filterPropertiesMap.get(filterEntry).items"
            [(selectedItems)]="filterPropertiesMap.get(filterEntry).selectedItems"
            [dropdownSettings]="filterPropertiesMap.get(filterEntry).setting"
            [placeholder]="filterPropertiesMap.get(filterEntry).name"
            [header]="filterPropertiesMap.get(filterEntry).name"
            (itemSelectEvent)="onItemSelect($event)"
            (itemDeselectEvent)="onItemDeselect($event)"
            (selectAllEvent)="onSelectAll($event)"
            (deselectAllEvent)="onDeselectAll($event)"

          ></app-multi-dropdown>

在 parent.component.ts 中我什么也没做，只记录：

  onItemSelect($event) {
    console.log("onItemSelect");

  }
  onItemDeselect($event) {
    console.log("onItemDeselect");

  }

  onSelectAll($event) {
    console.log("onSelectAll");

  }

  onDeselectAll($event) {
    console.log("onDeselectAll");

  }

在上面的代码filterPropertiesMap 中定义了设置。 您可能会看到我正在做的是在子组件中，我创建了用于选择、取消选择的事件发射器，并在我发出 this.selectedItems 的函数中。

但我不认为这是实现这一点的好方法，实际上，它也不能很好地工作。 有时，当我选择或取消选择时，它不会立即更改。

那么如何实现呢？当我选择取消选择，全选，全取消。我的父组件可以立即正确地做出反应。

另外奇怪的是：当我加载页面时，我会选择一些默认值，例如 6、7、8、9。然后我全选，还是6,7,8,9。然后我取消选择所有 agin 全选，该字段将更改为全部（例如 1、2、3、4、5、6、7、8、9）。 事件发射器有延迟还是会忽略某些选择？

编辑：

我尝试在这里提取所有必要的 sn-ps 代码来构建项目： https://drive.google.com/file/d/1BlV2EtdwZhqqpkdiC0_mlaw_r3w6Bder/view?usp=sharing

我希望当我所有的事件（select、deselect、selectAll、deselectAll）都可以被父组件发出和接收

sorry一个错误：父组件中的app-multi-dropdown标签应该是app-child

Answer 1

您可以将其用作 Angular 响应式表单的一部分，并在每次其值更改时发出。

子组件的 HTML 可能是这样的：

<form [formGroup]="myForm">
    <ng-multiselect-dropdown
        name="dropdownItems"
        [settings]="dropdownSettings"
        [placeholder]="placeholder"
        [data]="dropdownItems"
        formControlName="dropdownItems">
   </ng-multiselect-dropdown>
</form>

还有 .ts 文件：

import { IDropdownSettings } from 'ng-multiselect-dropdown';
import { FormGroup, FormBuilder } from '@angular/forms';
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';

@Component({
    selector: 'app-child',
    templateUrl: './child.component.html',
    styleUrls: ['./child.component.scss']
})
export class ChildComponent implements OnInit {

    @Input() placeholder: string;
    @Input() defaultValues: any[];
    @Input() dropdownItems: any[];
    @Input() dropdownSettings: IDropdownSettings;
    @Output() onDropdownChange = new EventEmitter();
    
    myForm: FormGroup;
    
    constructor(
        private _fb: FormBuilder
    ) { }

    ngOnInit(): void {
        this.myForm = this._fb.group({
            dropdownItems: ['']
        });

        // Set default values as real values
        this.onDropdownChange.emit(this.defaultValues);

        this.myForm.valueChanges.subscribe(val => {
            this.onDropdownChange.emit(val.dropdownItems)
        })
    }

}

编辑：根据您的上次更新：

使用您更新的代码和我的代码平静，我构建了这个在 stackblitz 上运行的功能项目：https://stackblitz.com/edit/angular-ivy-g7w3dz

希望我的逻辑正确

Answer 2

您没有正确设置发射器。这样做：

@Output()selectAllEvent = new EventEmitter<any>();

onSelectAll(event) {
  this.selectAllEvent.emit(this.selectedItems);
}

然后在父级上：

<app-multi-dropdown
   (selectAllEvent)="onSelectAll($event)"
></app-multi-dropdown>