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

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 = returnData.LogonToken，但是除非我重新加载页面，否则我的headerComponent中的按钮不会显示。所以，我想知道是否有办法在路由更改成功时重新初始化 headerComponent，以便在构造函数中从 globalService 获取令牌，或者是否有更好的方法在 globalService 和 headerComponent 之间共享该参数。

由于从移动设备提交而缩写代码，但应该得到这个想法。

仍在学习角度 2 的来龙去脉。

Answer 1

您的问题是this.logonToken只在构造函数中获取一次值。因此，当您注销时，globalService中的用户令牌确实为空，但不会反映在您的header.component中。一种解决方案是对标头组件使用可观察量并订阅全局服务。或者你直接使用全局服务变量到你的模板，就像这样

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

希望这有帮助。

Answer 2

根据 Angular2 官方文档，您可以使用 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将在实例化组件时被调用。希望这能回答您的问题，当然对您有所帮助。干杯，西格弗里德。

Answer 3

解决方案 1：重构您的服务，使其返回observable、promise或event，然后在组件上使用async管道，如下所示：<div *ngIf="(loginToken | async) != null">。

解决方案 2：@Input来自更高级别组件的loginToken，Angular 将在值更改时运行更改检测。

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