Angular. Маршрутизация из jQuery-функции

155
10 мая 2018, 05:54

Проект на Angular. В компоненте подключен fullCalendar (https://fullcalendar.io). Календарь использует jQuery и подключен так, как показано ниже. Как в функции, обрабатывающей dayClick указать переход на другой компонент angular? Я знаю, что можно импортировать Router и написать this.router.navigate(['/path']), но не знаю как правильно передать Router в функцию jQuery

import { Component, OnInit } from '@angular/core';
import * as $ from 'jquery';
import 'fullcalendar';
import {User} from "../user";
import {DataService} from "../data.service";
import {Router} from "@angular/router";
@Component({
  selector: 'app-fullcalendar',
  templateUrl: './fullcalendar.component.html',
  styleUrls: ['./fullcalendar.component.css']
})
export class FullcalendarComponent implements OnInit {
  constructor(private dataService: DataService, private router: Router) {
  }
  ngOnInit() {
    $(function() {
      let containerEl: JQuery = $('#calendar');
      containerEl.fullCalendar({
        header: {
          left: 'prev,next today',
          center: 'title',
          right: 'month,agendaWeek,agendaDay,listWeek'
        },
        navLinks: true, // can click day/week names to navigate views
        editable: true,
        eventLimit: true, // allow "more" link when too many events
        eventSources: [{
          url: 'api/shedules'
        }],
        eventClick: function(calEvent, jsEvent, view) {
          alert('Запись: ' + calEvent.title);
        },
        dayClick: function(calEvent, jsEvent, view) {
        }
      })
    });
  } 
}
Answer 1

Все просто, сделай переменную that которая будет равняться this в функции jQuery:

ngOnInit() {
    const that = this;    // Наш this объявляем тут.
    $(function() {
      let containerEl: JQuery = $('#calendar');
      containerEl.fullCalendar({
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay,listWeek'
            },
            navLinks: true, // can click day/week names to  navigate views
            editable: true,
            eventLimit: true, // allow "more" link when too many events
             eventSources: [{
                 url: 'api/shedules'
               }],
            eventClick: function(calEvent, jsEvent, view) {
                alert('Запись: ' + calEvent.title);
             }, 
           dayClick: function(calEvent, jsEvent, view) {
                that.router.navigate(['/path']);    // переходим куда нам нужно :) 
           }
       })
    });
} 
READ ALSO
Отправка формы .validate()

Отправка формы .validate()

Есть форма в модалке, на сайте Клик на "Оставить заявку"

254
Сериализация в Json списка с разным типом. Unity3D

Сериализация в Json списка с разным типом. Unity3D

Подскажите пожалуйста, как реализовать подобное:

198
Добавление записей базу данных через SQLite

Добавление записей базу данных через SQLite

Есть база данных, вот ее упрощенная версия:

192
Пример с пост- и пре-инкрементом

Пример с пост- и пре-инкрементом

Я знаю, что в случае пре-инкремента значение сначала увеличивается, а потом используется в выражении, а в случае пост-инкремента - наоборотНо...

337