如何在組件初始化後從服務中填充變量angular2

我有一個路由應用程序，加載並正常工作，除了事實上我有一個* ngIf元素不會顯示在路由更改上，除非我重新加載頁面。我有一個服務類的標記變量，我將它存儲在本地存儲中，並且當令牌不爲空時，我想顯示我的註銷按鈕。如何在組件初始化後從服務中填充變量angular2

當網站加載時，它會將令牌值設置爲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.

來源

2017-04-15 billy_comic

的插件和奏據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(); 
    } 
}

這是由方式，谷歌的人開發的例子ngOnInit將在實例化組件時被調用。希望這個回答你的問題，當然可以幫助你。乾杯，sigfried。

來源

2017-04-15 04:29:55 sigfried

你的問題是this.logonToken只在構造函數中獲取一次值。因此，當您註銷時，globalService中的用戶令牌確實爲空，但未反映在您的header.component中。一種解決方案是在你的頭文件組件中使用observables並訂閱你的globalService。或者你直接使用全局服務變量來這樣你的模板

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

希望這會有所幫助。

來源

2017-04-15 04:37:08 brijmcq

解決方案1：重構您服務，以便它返回一個observable，promise或event，然後在你的組件利用async -pipe像這樣：<div *ngIf="(loginToken | async) != null">。

解決方案2：@Input的loginToken從一個更高的水平分量和角將運行變化檢測的值的變化時。

無論哪種方式，我會將構造函數中的邏輯移動到像ngOnInit或ngOnChanges這樣的生命週期鉤子。

來源

2017-04-15 05:02:44 unitario

如何在組件初始化後從服務中填充變量angular2

回答

相關問題