Event Emitter Angular - PullRequest
Новая
       16

Event Emitter Angular

0 голосов
/ 11 марта 2019

Приведенный ниже код применяет фильтры к странице, но фильтры начинают работать только тогда, когда я щелкаю, чтобы закрыть панель фильтра.Как я могу применить их на лету, не закрывая саму панель? 

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>

1 Ответ

0 голосов
/ 13 марта 2019

Решено! Я добавил onChange, как предложил @webdevius:

Добавлено 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) {

  }
}
...