在Angular的jQuery事件監聽器中使用注入的依賴項

Question

我在Angular 6中使用Bootstrap 4模態，並且一旦模態關閉，我想將用戶重定向到另一條路線。 但是，當模式關閉時，我遇到了一個范圍界定問題，告訴我我注入的路由器未定義。

我的代碼：

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可以作為注入的依賴項訪問router ，並使用箭頭函數語法（ (e) => {} ）將其范圍限定到正確的范圍。 像這樣：

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

Answer 2

像在Jquery一樣使用this關鍵字。

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