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);
}
}
您可以使用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);
}
}
然后在网格控制器中,注入此服务并从组件中所需的服务订阅所选日期。
constructor(private service: DateService){
this.service.chosenDate.subscribe((date: Date) => {
// do something useful with date
});
最后在你的日期字段更改事件中,输入此代码以将新日期传递给服务
this.service.dateChanged(date);
编辑:我在这里为您做了一个例子,展示了解决方案。我相信你可以在代码中轻松实现这一点。