我正在研究在Angle 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>`
}
}];
每月排课日课程:
@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');
}
}
是否有“正确”的方式将这些组件绑定到小部件创建的标记内?我设法通过侦听来自小部件的bind事件,然后遍历它创建的元素并使用DynamicComponentLoader来做到这一点,但是感觉很不对。
我在此线程中找到了一些所需的详细信息:https : //github.com/angular/angular/issues/6223
我鞭打了这项服务以处理绑定我的组件:
import { Injectable, ComponentMetadata, ViewContainerRef, ComponentResolver, ComponentRef, Injector } from '@angular/core';
declare var $:JQueryStatic;
@Injectable()
export class JQueryBinder {
constructor(
private resolver: ComponentResolver,
private injector: Injector
){}
public bindAll(
componentType: any,
contextParser:(html:string)=>{},
componentInitializer:(c: ComponentRef<any>, context: {})=>void):
void
{
let selector = Reflect.getMetadata('annotations', componentType).find((a:any) => {
return a instanceof ComponentMetadata
}).selector;
this.resolver.resolveComponent(componentType).then((factory)=> {
$(selector).each((i,e) => {
let context = contextParser($(e).html());
let c = factory.create(this.injector, null, e);
componentInitializer(c, context);
c.changeDetectorRef.detectChanges();
c.onDestroy(()=>{
c.changeDetectorRef.detach();
})
});
});
}
}
参数:
用法示例:
let parser = (html: string) => {
return {
date: parseInt(html)
};
};
let initer = (c: ComponentRef<GridCellComponent>, context: { date: number })=>{
let d = context.date;
c.instance.count = this.data[d];
c.instance.date = d;
}
this.binder.bindAll(GridCellComponent, parser, initer );
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句