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

【问题标题】：How to populate variable from service after component has initialized angular2组件初始化angular2后如何从服务中填充变量
【发布时间】：2017-04-15 04:11:38
【问题描述】：

我有一个路由应用程序，除了我有一个不会显示在路由更改上的 *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 之间共享该参数。

由于是从手机提交的，所以代码略短，但应该明白了。

仍在学习 Angular 2 的来龙去脉。

【问题讨论】：

标签： angular2-routing angular2-services angular2-components

【解决方案1】：

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

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

希望这会有所帮助。

【讨论】：

【解决方案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。希望这能回答您的问题，当然对您有所帮助。干杯，西格弗里德。

【讨论】：

【解决方案3】：

解决方案 1： 重构您的服务，使其返回 observable、promise 或 event，然后在您的组件上使用 async-pipe，如下所示：@ 987654325@.

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

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

【讨论】：