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事件，因此它们并不都具有{{1} }属性。

我们可以在此处添加url运算符，以过滤掉不是.filter事件的所有事件。这样，它们都应该具有NavigationEnd属性，以使url不会被覆盖到currentUrl

undefined

Here is a fork of the StackBlitz

Angular.js 6.1.0-变量未传递到视图

1 个答案: