angularの記載例で足りない所を補って実行させたい

Question

下記ページにおいて、
Observableのライフサイクル
下記を実行させたいと考えいます。

export class AppComponent {
  constructor(private router: Router) { }

  ngOnInit() {
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd),
    ).subscribe((event: NavigationEnd) => {
      console.log(event.url);
    });
  }
}

app.component.tsに対し上記を追加すれば実行できると思いますが、
あと何を補えば実行できるか分かりかねています。

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Tour of Heroes';

  constructor(private router: Router) { }

  ngOnInit() {
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd),
    ).subscribe((event: NavigationEnd) => {
      console.log(event.url);
    });
  }


}

基礎を確認し取り組んでいますが、いざ手を加えようとしても手が止まります。
どうかご教授いただけるとありがたいです。
どうかよろしくお願いします。

(試したこと）
private router: Routerを使用するためにimportを記載しようとしましたが、
private route: ActivatedRouteの場合の場合下記のように候補が出てきましたが、Routerは出てきませんでした。

（補足)
以下バージョンです。9.1.0です。
mbp:toh-pt3 aaa$ ng -v
Your global Angular CLI version (9.1.0) is greater than your local
version (9.0.7). The local Angular CLI version is used.

Answer 1

候補は出なくても正しくはRouterを読まなくてはなりませんので以下をimportしてみてください。

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

・・・

constructor(private router: Router) { }

Comments

[kenji267]

回答ありがとうございます。
手抜きでimport記載しようとして、できなかったので諦めていました。
Angularをやって色々ルールが多すぎて疲れていた感がありました。

あと、filterと、NavigationEndで同様のエラーが出ます。
型定義の問題なのか、importが足りないのか、import路線で探しても
回答は出てきそうにないです。
もうこの辺り聞くのは甘えすぎかもしれませんが、もし可能であれば確認頂ければ幸いです。

[keisukeh]

NavigationEndは以下ページを参照ください
https://angular.jp/api/router/NavigationEnd
一番上に「API > @angular/router」とありますのでimportもとはこちらになります。
filterに関してはrxjsという外部ライブラリになります。
「rxjs/operators」から読み込めます
おそらく両方ともimportの補完は出てくるはずなのでangular系の拡張機能など探して入れてみたほうがいいかもしれません。
import元をすべて覚えておくことは不可能なので

[kenji267]

filterの該当ライブラリーを見つけるのは現状厳しいかなあと。
取り組みを続けていけば知識の関連で対応していけるでしょうか・・・
なんとか進めてみます。ご教授ありがとうございました！