Angular 7 получает значение выбранной даты из средства выбора даты Kendo UI - PullRequest
Новая
       31

Angular 7 получает значение выбранной даты из средства выбора даты Kendo UI

0 голосов
/ 14 апреля 2019

My App Component.html имеет базовую навигацию и средство выбора даты, например ... 

<div class="container-fluid">
    <div class="row">

<!-- Navigation Removed -->          
        <div class="col-md-2 float-right">
            <kendo-datepicker
                (valueChange)="onChange($event)"
                [(value)]="value">
            </kendo-datepicker>
        </div>
    </div>
</div>
<router-outlet></router-outlet>

Файл component.ts настраивается следующим образом: 

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

@Component({
  selector: 'app-root',
  encapsulation: ViewEncapsulation.None,
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  @Input() value: Date = new Date();
  @Output() dateChanged: EventEmitter<Date> = new EventEmitter<Date>();

  constructor() {}

  public onChange(value: Date): void {
    this.dateChanged.emit(value);
  }
}

У меня есть несколько страниц, на которых есть элемент управления сеткой, вызывающий службу, но дата в настоящее время жестко запрограммирована, и все это работает отлично. Я хочу иметь возможность обновлять данные сетки на основе выбранной даты из описанного выше средства выбора даты, по сути, я нажму на сборщик данных, полученное значение будет передано методу в компоненте с контроллером сетки.

Контроллер с сеткой: 

import { Component, OnInit, Input } from '@angular/core';
import { GridDataResult, DataStateChangeEvent } from '@progress/kendo-angular-grid';
import { DataSourceRequestState } from '@progress/kendo-data-query';
import { DataService } from '../services/DataService.service';

import { Observable } from 'rxjs/Observable';
import { State } from '@progress/kendo-data-query';

@Component({
  templateUrl: './grid.component.html',
  styleUrls: ['./grid.component.css']
})
export class GridComponent implements OnInit {

  public products: GridDataResult;
  public state: DataSourceRequestState = {
      skip: 0,
      take: 25
  };
  @Input() value: Date = new Date();

  constructor(private dataService: DataService) { }

  ngOnInit() {
     this.dataService.fetch(this.state).subscribe(r => this.products = r);
  }

  public dataStateChange(state: DataStateChangeEvent): void {
    this.state = state;
    this.dataService.fetch(state)
        .subscribe(r => this.products = r);
}

}

1 Ответ

2 голосов
/ 15 апреля 2019

Вы можете использовать Subject для прослушивания изменений при вводе даты.

Сначала создайте службу даты. 

@Injectable()
export class DateService {

  public chosenDate: Observable<Date>;
  private dateSubject: Subject<Date>;

  constructor() {
    this.dateSubject = new Subject<Date>();
    this.chosenDate = this.dateSubject.asObservable();
  }

  dateChanged(newDate:Date){
    this.dateSubject.next(newDate);
  }

}

Затем в своем Grid-контроллере внедрите эту службу и подпишитесь на выбранную дату из службы, где вам нужно в вашем компоненте. 


constructor(private service: DateService){



this.service.chosenDate.subscribe((date: Date) => { 
    // do something useful with date
});

и, наконец, в вашем событии изменения поля даты, поместите этот код, чтобы передать новую дату службе 

this.service.dateChanged(date);

Редактировать: Здесь я сделал для вас пример, демонстрирующий решение.Я уверен, что вы можете легко реализовать это в своем коде.

DEMO

...