Как преобразовать реализацию Jquery в угловой 6

Question

У меня есть библиотека https://github.com/nekken/ng2-fullcalendar/ ниже для моего каландра, но в этой библиотеке есть ограниченные возможности, поэтому я использовал API полного каландра для расширения до бизнес-требований.

Итак, вот функция реализации Viewrender для отключения кнопок предыдущего и следующего месяцев при пересечении следующих месяцев и предыдущего месяца.

Например, кнопка должна быть отключена, когда текущим месяцем является ноябрь 2018 года - если пользователь нажимает кнопку JAn 2019, следующая кнопка должна быть отключена, и пользователь выбирает сентябрь 2018 года, предыдущая кнопка должна быть отключена.

Я написал логику в jquery внутри функции angualr, кто-нибудь конвертирует это в angular 6 way.

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: демо

Answer 1

Самый простой способ - использовать NgClass .

Вы создаете boolean внутри своего контроллера с кодом isPrevButtonEnabled и isNextButtonEnabled (ученики).

В вашем компоненте вы помещаете внутрь элемента .fc-prev-button:

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

То же самое для вашей кнопки Next.

В своем коде ts вы просто используете:

isPrevButtonEnabled = cal_date_string !== cur_date_string;

И то же самое для NextButton.

Редактировать

Если вы не можете изменить код компонента, просто используйте следующее для извлечения элемента DOM: document.getElementsByClassName("fc-prev-button");.

Но будьте осторожны, это может быть ложным, если элементы еще не созданы в DOM. Используйте в OnAfterViewInit, и все будет в порядке.