角4.3.1更新组件

的SETUP角4.3.1更新组件

我自学角用我自己的一个简单的应用程序：游戏将使用路由，服务等在着陆页（路线为'/'），我想要标题隐藏。头和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没有反映在模板（最有可能的。

问题

那么，你如何从回调影响组件范围可观察到的？

来源

2017-07-23 gkl

我的理解是什么，你是那种做封，其中setHeader的返回功能将被注册为订阅。

的setHeader的返回function应该使用Arrow福nction为了坚持正确的这个

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

来源

2017-07-23 15:12:56

您需要的this关键字绑定到setHeader功能。

可以这样做，在2种方式：

使用箭头=>功能

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

使用bind

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

来源

2017-07-23 15:15:53

角4.3.1更新组件

回答

相关问题