我正在将Kendo用于Angular 2项目中。
正确设置小部件没有问题:
ngOnInit() {
let options = inputsToOptionObject(KendoUIScheduler, this);
options.dataBound = this.bound;
this.scheduler = $(this.element.nativeElement)
.kendoScheduler(options)
.data('kendoScheduler');
}
当插件运行时,它会修改DOM(据我所知,而不修改由angular2维护的影子DOM)。我的问题是,如果我想在插件内部的任何地方使用组件,比如在模板中,Angular并不知道它的存在,也无法绑定它。
例子:
public views:kendo.ui.SchedulerView[] = [{
type: 'month',
title: 'test',
dayTemplate: (x:any) => {
let date = x.date.getDate();
let count = this.data[date];
return `<monthly-scheduler-day [date]="test" [count]=${count}"></monthly-scheduler-day>`
}
}];
monthly-scheduler-day类:
@Component({
selector: 'monthly-scheduler-day',
template: `
<div>{{date}}</div>
<div class="badge" (click)=dayClick($event)>Available</div>
`
})
export class MonthlySchedulerDayComponent implements OnInit{
@Input() date: number;
@Input() count: number;
constructor() {
console.log('constructed');
}
ngOnInit(){
console.log('created');
}
dayClick(event){
console.log('clicked a day');
}
}
在小部件创建的标记中,有一种“正确”的方式来绑定这些组件吗?我已经通过监听小部件的绑定事件,然后循环遍历它创建的元素并使用DynamicComponentLoader来实现了这个目标,但感觉不太对。