Question

设置

我用自己的简单应用程序教自己Angular：一个将使用路由，服务等的游戏。在着陆页（路线为＆＃39; /＆＃39;），我想要要隐藏的标题。标题和router-outlet在这样的app-component中一起出现（包括品牌中的一些调试输出）：

<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没有反映在模板中（很可能是因为它实际上没有进入事件回调的范围。

问题

那么，如何通过observable的回调来影响组件范围？

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函数。

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

使用arrow =＆gt;功能

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

使用bind

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

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

2 个答案: