事件发射器 Angular

Question

下面的代码为页面应用了过滤器，但过滤器只有在我单击关闭过滤器面板时才开始工作。如何在不关闭面板的情况下即时应用它们？

import { Component, OnInit, ViewEncapsulation, Input, ElementRef, 
EventEmitter, Output } from '@angular/core';
import { MultiselectBaseModel } from '../app-models/MultiselectBaseModel';

@Component({
  selector: 'app-filter-multiselect',
  templateUrl: './filter-multiselect.component.html',
  styleUrls: ['./filter-multiselect.component.less'],
  encapsulation: ViewEncapsulation.None
})
export class FilterMultiselectComponent implements OnInit {
  @Input() labelComponent: string;
  @Input() items: MultiselectBaseModel[];
  @Input() itemsSelected: MultiselectBaseModel[];
  @Output() closeMultiselectEventHandler: EventEmitter<any> = new 
EventEmitter();

  isOpen = false;

  constructor(public el: ElementRef) { }

  ngOnInit() { }

  handlePanelShow() {
    this.isOpen = true;
  }

  handlePanelHide() {
    this.isOpen = false;
    this.closeMultiselectEventHandler.emit(this.itemsSelected);
  }

  handleClickMultiSelect(event) {

  }
}

我的 HTML 在这里：

<div class="filter-multiselect">
  <p-multiSelect [options]="items"
             [(ngModel)]="itemsSelected"                 
             styleClass="multiSelect"
             [defaultLabel]="labelComponent"
             (onPanelShow)="handlePanelShow()"
             (onPanelHide)="handlePanelHide()"
             panelStyleClass="panelStyleClassCustom"
             [ngClass]="isOpen ? 'multi-select-open' : '' "
             [maxSelectedLabels]="0">
    <ng-template let-element let-i="index" pTemplate="item">
      <div class="ui-multiselect-item-text">{{element.label}}</div>
    </ng-template>
  </p-multiSelect>
</div>

Answer 1

已解决！我按照@webdevius 的建议添加了 onChange：

将 onChange 添加到我的面板的 HTML

<div class="filter-multiselect">
  <p-multiSelect [options]="items"
                 [(ngModel)]="itemsSelected"
                 styleClass="multiSelect"
                 [defaultLabel]="labelComponent"
                 (onPanelShow)="handlePanelShow()"
                 (onPanelHide)="handlePanelHide()"
                 (onChange)="filtersApply()"
                 panelStyleClass="panelStyleClassCustom"
                 [ngClass]="isOpen ? 'multi-select-open' : '' "
    [maxSelectedLabels]="0">
    <ng-template let-element let-i="index" pTemplate="item">
      <div class="ui-multiselect-item-text">{{element.label}}</div>
    </ng-template>
  </p-multiSelect>
</div>

并在选择过滤器时发出（现在它不依赖于面板是否打开）

import { Component, OnInit, ViewEncapsulation, Input, ElementRef, EventEmitter, Output } from '@angular/core';
import { MultiselectBaseModel } from '../app-models/MultiselectBaseModel';

@Component({
  selector: 'app-filter-multiselect',
  templateUrl: './filter-multiselect.component.html',
  styleUrls: ['./filter-multiselect.component.less'],
  encapsulation: ViewEncapsulation.None
})
export class FilterMultiselectComponent implements OnInit {
  @Input() labelComponent: string;
  @Input() items: MultiselectBaseModel[];
  @Input() itemsSelected: MultiselectBaseModel[];
  @Output() closeMultiselectEventHandler: EventEmitter<any> = new EventEmitter();

  isOpen = false;

  constructor(public el: ElementRef) { }

  ngOnInit() {}

  handlePanelShow() {
    this.isOpen = true;
  }

  handlePanelHide() {
    this.isOpen = false;
  }

  filtersApply() {
    this.closeMultiselectEventHandler.emit(this.itemsSelected);
  }

  handleClickMultiSelect(event) {

  }
}

事件发射器 Angular

Event Emitter Angular

eventemitter

typescript

angular