将集合传递给 Angular 中的子组件

Question

我有一个由 id: number(Gist for the Data as JSON) 标识的复选框列表。如果我选中第一个复选框，那么 id 值将存储到 Set 中。

我的ParentComponent如下：

parent.component.ts 代码片段

import { Component, OnInit } from '@angular/core';
import * as FilterFunc from 'src/assets/FilterFunction.json';

const Filters: any = FilterFunc;

@Component({
  selector: 'parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent implements OnInit {
  filters = Filters.default;
  selections = new Set();

  constructor() {
  }
  ngOnInit(): void {
  }
  changeCheck(id: number, event: any) {
    (event.target.checked) ?
      this.selections.add(id):
      this.selections.delete(id);

  }
}

parent.component.html 代码片段：

<!--- ....>
<div *ngFor="let label of filter['labels']">
          <div class="form-check">
            <input class="form-check-input"
                   type="checkbox"
                   value="{{label['id']}}"
                   id="{{label['id']}}"
                   [(ngModel)]="label['checked']"
                   (change)="changeCheck(label['id'], $event)"
            >
              <label class="form-check-label" for="{{label['id']}}">
                {{label['name']}}
              </label>
          </div>
      </div>

我希望将此 selections: Set 传递给子组件，并在父组件的 HTML 组件中添加了以下内容：

<child [selected]=selections></child>

在 ChildComponent 中：

child.component.ts

import { Component, OnInit, Input} from '@angular/core';
@Component({
  selector: 'child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css'],
  providers: [
    // service that I need
  ]
})
export class ChildComponent implements OnInit {


  @Input()selected: any; // not sure if `Set` is a type for a variable in TS

  constructor(private service: ExploreService) { }

  ngOnInit() {      }

   someFunct() {
      // Use the incoming `selected` here.
   }

}

child.component.html

   {{ selected | json }}

但每当我选中一个复选框时，它只在浏览器中为我提供 {}，根据 changeCheck，selections 应该在 Set

如果我使用 {{selected}}，它会一直为我提供 [object Set]。如何将 Set 从父组件传递到子组件？

在子组件中使用 OnChange 指令后，我执行以下操作：

ngOnChanges(change: SimpleChange) {
console.log(change.currentValue);
}

这为我提供了 Set()，但 selected 在浏览器的控制台中仍然是一个空集。

Answer 1

发送给子组件的唯一可能方法是将 Set 转换为数组，然后将其传递给子组件

我必须创建一个私有成员作为 Set，并且必须将其转换为 Array

private _selections = new Set();
selections: number[] = [];

在检查事件结束时的 changeCheck(id: number, event: any) 函数中

(event.target.checked) ? this._selection.add(id) : this._selection.delete(id);
this.selections = Array.from(this._selections);

最终，当父级每次传递 ID 值时，它将与 OnChanges 挂钩一起工作。

将集合传递给 Angular 中的子组件

Passing a Set to a Child Component in Angular

set

angular-directive

angular