在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');
        }
    }
}

当我单击我的按钮时，

'clicked'出现在控制台中，因此它可以识别自定义事件。但是该错误声明我的路由器在此eventListener的范围内未定义。我该如何解决？