Javascript Angular 4.3.1从内部可观察回调更新组件

设置

我正在用我自己的一个简单的应用程序自学：一个使用路由、服务等的游戏。在登录页上（路由为“/”），我想隐藏标题。标题和路由器出口一起出现在应用程序组件中，如下所示（包括品牌中的一些调试输出）：

this.showHeader

的值在

ngOnInit

中正确设置，标头将根据其初始化方式正确显示或不显示。控制台显示导航期间发生的事件以及正确确定的值。问题在于，在回调上下文中，

此

不再是组件。因此，我尝试通过引用传入

this.showHeader

。但是，

showHeader

没有反映在模板中（很可能是因为它实际上没有进入事件回调的范围）

问题

---

那么，您如何通过可观察对象的回调来影响组件范围呢？

我理解的是，您在做闭包，其中

setHeader

的返回函数将注册为订阅

setHeader

返回的

函数

应使用

箭头

函数来持续纠正此错误

private setHeader () {
    var showHeader = this.showHeader;
    //return function (event) {
    //should get changed to below line
    return (event) => { //Use Arrow function here.
      if (event instanceof NavigationEnd) {
        showHeader = event.url === '/';
        console.log(event.url, showHeader, this.showHeader);
      };
    };
}

---

您需要将

this

关键字绑定到

setHeader

函数

您可以通过两种方式实现这一点：

使用arrow=>函数

this.router.events.subscribe（（）=>this.setHeader（））；

使用

bind

this.router.events.subscribe（this.setHeader.bind（this））；

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
  showHeader: boolean;

  constructor(
    private router: Router
  ) {}

  ngOnInit () {
    this.showHeader = true;
    this.router.events.subscribe(this.setHeader());
  }

  private setHeader () {
    var showHeader = this.showHeader;
    return function (event) {
      if (event instanceof NavigationEnd) {
        showHeader = event.url === '/';
        console.log(event.url, showHeader, this.showHeader);
      };
    };
  }
}

private setHeader () {
    var showHeader = this.showHeader;
    //return function (event) {
    //should get changed to below line
    return (event) => { //Use Arrow function here.
      if (event instanceof NavigationEnd) {
        showHeader = event.url === '/';
        console.log(event.url, showHeader, this.showHeader);
      };
    };
}