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 没有被传递给视图。我已经检查并再次检查了我的代码是否与视频中显示的完全一致，并直接从 tut 的文本版本中粘贴，但无济于事。

我已经确认 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;
    });

Here is a fork of the StackBlitz