如何将Jquery Implementation转换为angular 6

Question

我有一个使用https://github.com/nekken/ng2-fullcalendar/下面是我的calander库，但这个库中的选项有限，所以我使用了完整的calender api来扩展到完全满足业务需求。

因此，这里有函数Viewrender实现函数，当跨越未来一个月和前一个月时，可以禁用上个月和下个月按钮。

例如(当当前月份是2018年11月时，按钮应禁用-如果用户点击JAn 2019，则下一个按钮应禁用，而用户选择2018年9月的上一个按钮则应禁用。

我在angualr函数中的jquery中写了一个逻辑，任何人都可以将其转换为angular 6方式。

onViewRender(view, element) {
// alert(view.intervalStart);
// alert(view.intervalEnd);
// alert(view.start);
// alert(view.end);
// alert(view.title);
// console.log(view.intervalStart); 
// console.log(view.intervalEnd); 
var now = new Date(); 
var end = new Date();
end.setMonth(now.getMonth() + 1); 
console.log( view.start.format('MM'));//11
console.log(view.start.format('YYYY'));//2018
var cal_date_string = view.start.format('MM')+'/'+view.start.format('YYYY');
var cur_date_string = now.getMonth()+'/'+now.getFullYear();
var end_date_string = end.getMonth()+'/'+end.getFullYear();
if(cal_date_string == cur_date_string) { jQuery('.fc-prev-button').addClass("fc-state-disabled"); }
else { jQuery('.fc-prev-button').removeClass("fc-state-disabled"); }
if(end_date_string == cal_date_string) { jQuery('.fc-next-button').addClass("fc-state-disabled"); }
else { jQuery('.fc-next-button').removeClass("fc-state-disabled"); }
}

Stacklitz演示：演示

Answer 1

最简单的方法是使用NgClass。

在控制器的代码isPrevButtonEnabled和isNextButtonEnabled(类成员(中创建一个boolean。

在组件中，您将.fc-prev-button元素放在里面：

[ngClass]="{ 'fc-state-disabled': !isPrevButtonEnabled }"

"下一步"按钮也是如此。

在ts代码中，您只需使用：

isPrevButtonEnabled = cal_date_string !== cur_date_string;

NextButton也是如此。

编辑：

如果不能修改组件代码，只需使用以下内容来检索DOM元素：document.getElementsByClassName("fc-prev-button");。

但是要注意，如果元素还没有在DOM中创建，那么这可能是错误的。在OnAfterViewInit中使用，您应该没事。