Использовать вставленную зависимость в слушателе событий jQuery в angular

Question

Я использую модалы Bootstrap 4 в Angular 6 и хочу перенаправить пользователя на другой маршрут после закрытия модального режима.Однако, когда закрывается модальное окно, появляется сообщение об ошибке, сообщающей, что мой введенный маршрутизатор не определен.

Мой код:

import { Component, OnInit } from '@angular/core';

declare var $: any


@Component({
    selector: 'app-modal',
    templateUrl: './modal.component.html',
    styleUrls: ['./modal.component.css']
})
export class ModalComponent implements OnInit {
    constructor(
        public router: Router
    ) {}

    ngOnInit() {}

    ngAfterViewInit() {
        $('#mymodal').on('hidden.bs.modal', function (e) {
            router.navigate(['/']) //tells me that router is undefined
        })
    }
}

Answer 1

Используйте this ключевое слово как это в Jquery.

ngAfterViewInit() {
var self = this;
    $('#mymodal').on('hidden.bs.modal', function (e) {
        self.router.navigate(['/']);
    })
}

Answer 2

Используйте this, чтобы иметь доступ к router как внедренной зависимости, и синтаксис функции стрелки ((e) => {}) , чтобы перераспределить его в нужную область. Как это:

ngAfterViewInit() {
  $('#mymodal').on('hidden.bs.modal', (e) => {
    this.router.navigate(['/']);
  })
}