如何将 Jquery 实现转换为 Angular 6

Question

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

所以这里是 Viewrender 实现的函数，用于在跨越未来一个月和上一个月时禁用上个月和下个月按钮。

例如）当当前月份是 2018 年 11 月时，按钮应该被禁用 - 如果用户点击 JAn 2019 下一个按钮应该禁用并且用户选择 2018 年 9 月上一个按钮应该被禁用。

我在 Angular 函数中的 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"); }
  }

Stackblitz 演示： demo

Answer 1

最简单的方法是使用NgClass。

您在控制器 ts 代码 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 中使用应该没问题。