Question

我有一个路由应用程序加载和工作正常，除了我有一个* ngIf元素没有显示路由更改除非我重新加载页面。我有一个来自服务类的令牌变量，我将它存储在本地存储中，并且我想在令牌不为空时显示我的注销按钮。

当网站加载时，它将令牌值设置为null，隐藏按钮（预期行为）但是当登录并看到令牌到guid时，变量不会显示令牌值，除非我重新加载重新初始化标题组件的页面。

下面的缩写代码。

Import { Component } from '@angular/core';
Import { globalService } from './shared/globalService';
@Component({
selector: 'header-ele',
template: ` <div *ngIf="loginToken != null"><button>logout</button></div>
<router-outlet></router-outlet>`
})
export class headerComponent {
loginToken:any;

constructor(globalService: globalService){
this.logonToken = globalService.getUser(); //this either returns null or a token string
}
}

然后我有另一个改变路线的组件，一切正常

//I have all of my correct imports and all works
export class loginComponent {
        login(){
// I pass login params and get success
    this.globalService.setUser(returnedData.LogonToken)
}
  }

在globalService中我设置了logonToken = returnedData.LogonToken，但是我的headerComponent中的按钮没有显示，除非我重新加载页面。所以，我想知道是否有办法在路由更改成功时重新初始化headerComponent以从构造函数中的globalService获取令牌，或者是否有更好的方法在globalService和headerComponent之间共享该参数。

由于从移动设备提交的缩写代码，但应该明白。

仍在学习角度2的细节。

Answer 1

您的问题是this.logonToken只在构造函数中获取一次值。因此，当您退出时，globalService中的用户令牌确实为空，但未反映在header.component中。一种解决方案是将observable用于头部组件并订阅您的globalService。或者您直接将全局服务变量用于模板，如此

<div *ngIf="globalService.getUser()"><button>logout</button></div>

希望这有帮助。

Answer 2

根据Angular2 official documentation你可以使用ngOnInit函数，但我会尝试给你一个例子：

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

import { Hero } from '../hero';
import { HeroService } from '../services/hero.service';

import { HeroDetailComponent } from '../hero-detail/hero-detail.component';

@Component({
  selector: 'app-dashboard-component',
  templateUrl: './dashboard-component.component.html',
  styleUrls: ['./dashboard-component.component.css'],
  providers: [HeroDetailComponent]
})
export class DashboardComponent implements  OnInit {

  heroes: Hero[];

  constructor(private heroService: HeroService) {}

  getHeroes(): void {
    this.heroService.getHeroes().then(
      (heroes) => this.heroes = heroes.slice(1,5)
    );
  }

  ngOnInit(): void {
    this.getHeroes();
  }
}

顺便说一句，这是Google的人员开发的示例，当您实例化组件时，将调用ngOnInit。希望这能回答你的问题，当然也会帮助你。干杯，sigfried。

Answer 3

解决方案1：重构您的服务，使其返回observable，promise或event，然后在您的组件上使用{{1像这样的管道：async。

解决方案2： <div *ngIf="(loginToken | async) != null">来自更高级别组件的@Input，Angular会在值更改时运行更改检测。

无论哪种方式，我都会将构造函数中的逻辑移动到loginToken或ngOnInit等生命周期钩子。

如何在组件初始化angular2后从服务填充变量

3 个答案: