Angular.js 6.1.0 - переменная не передается в представление

Question

Я пересматриваю свой угловой, работая над учебником:

https://www.youtube.com/watch?v=z4JUm0Bq9AM

https://coursetro.com/posts/code/154/Angular-6-Tutorial---Learn-Angular-6-in-this-Crash-Course

У меня есть два файла для боковой панели:

sidebar.component.ts

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

@Component({
  selector: 'app-sidebar',
  templateUrl: './sidebar.component.html',
  styleUrls: ['./sidebar.component.scss']
})
export class SidebarComponent implements OnInit {

  currentUrl: string;

  constructor(private router: Router) {
    router.events.subscribe((_: NavigationEnd) => this.currentUrl = _.url);
  }

  ngOnInit() {
  }

}

sidebar.component.ts

<nav>
  <ul>
    <li>
      <a routerLink="" [class.activated]="currentUrl == '/'">
        <i class="material-icons">supervised_user_circle</i>
      </a>
    </li>
    <li>
      <a routerLink="posts" [class.activated]="currentUrl == '/posts'">
        <i class="material-icons">message</i>
      </a>
    </li>
  </ul>
</nav>

Проблема в том, что currentUrl не передается в представление. Я проверил и дважды проверил, что мой код в точности соответствует тому, что показан на видео, и вставлен непосредственно из текстовой версии текста, но безрезультатно.

Я подтвердил, что 1, он устанавливается (через console.log) и 2, то есть не передается в представление (посредством выгрузки переменной на страницу с помощью {{ currentUrl }}).

Если бы кто-нибудь мог указать мне, в чем проблема, я был бы очень благодарен.

Answer 1

В исходном коде, даже если вы ввели событие как NavigationEnd, не все события на самом деле являются NavigationEnd событиями, и поэтому они не все имеют свойство url.

Мы можем добавить оператор .filter, чтобы отфильтровать любые события, которые не являются NavigationEnd событиями. Таким образом, все они должны иметь свойство url, чтобы currentUrl не перезаписывалось на undefined

  constructor(private router: Router) {
    router.events.pipe(
      filter((evt) => evt instanceof NavigationEnd)
    ).subscribe((_: NavigationEnd) => {
      this.currentUrl = _.url;
    });

Вот разветвление StackBlitz