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

Question

设置

我正在用我自己的一个简单的应用程序自学 Angular：一个使用路由、服务等的游戏。在着陆页("/"的路由(上，我希望隐藏标题。标头和router-outlet一起在应用程序组件中，如下所示(包括品牌中的一些调试输出(：

<nav class="navbar navbar-default navbar-fixed-top" [hidden]="!showHeader">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="" [routerLink]="['/']">FARKLE! {{showHeader | json}}</a>
</div>
</div>
</nav>
<div class="container">
<router-outlet></router-outlet>
</div>

组件类声明布尔showHeader，并在路由更改时尝试更新它，如下所示：

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);
};
};
}
}

this.showHeader的值在ngOnInit中正确设置，标头将根据其初始化方式正确显示或不显示。控制台显示导航期间发生的事件以及正确确定的值。问题在于，在回调的上下文中，this不再是组件。因此，我尝试通过引用传递this.showHeader。但是，showHeader不会反映在模板中(很可能是因为它实际上并未进入事件回调的范围。

问题

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

Answer 1

我的理解是，你正在做闭包，setHeader返回的函数将被注册为订阅。

setHeader返回的function应该使用Arrow函数来坚持纠正这一点

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);
};
};
}

Answer 2

您需要将this关键字绑定到setHeader函数。

您可以通过两种方式执行此操作：

1. 使用箭头 => 函数

this.router.events.subscribe(() => this.setHeader());

2. 使用bind

this.router.events.subscribe(this.setHeader.bind(this));