angular - 在 Angular 6 中调度自定义事件

Question

我有一个我创建的自定义元素，如果单击特定元素，它会调度一个自定义事件。我是 Angular 的新手，我正在努力根据自定义事件将用户引导到特定路线。

我已经在我的 app-routing.module.ts 中声明了所有路由/路径。以下是我的组件的一部分：

import {Router} from '@angular/router';

export class Example implements AfterViewInit {

    constructor(private router: Router) {
        this.router = router;
    }

    ngAfterViewInit() {
        this.element.addEventListener('locationsSelected', function(evt) {
            console.log('clicked');
            this.router.navigateByUrl('/locations');
        }
    }
}

当我单击按钮时，控制台中会显示“已单击”，因此它确实可以识别自定义事件。但是，错误声称我的路由器在此事件侦听器的范围内未定义。我该如何解决这个问题？

标签： angularrouterweb-componentcustom-elementcustom-events