0
私は経路変更に表示されない* ngIf要素を持っていることを除いて、ロードされてうまく機能するルーティングされたアプリケーションを持っています。私はそれをローカルストレージに保存するサービスクラスからトークン変数を持っており、トークンがnullでないときに私のログアウトボタンを表示したい。コンポーネントがangular2を初期化した後にサービスから変数を移入する方法
サイトがロードされると、ボタンを隠すトークン値（期待される動作）が設定されますが、ログインして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中ボタンがない限り、表示されない
私はページをリロードします。ですから、コンストラクタ関数内のglobalServiceからトークンを取得するために、ルート変更成功時にheaderComponentを再初期化する方法があるか、またはglobalServiceとheaderComponentの間でそのパラメータを共有するためのより良い方法があるかどうかは疑問です。モバイルからの提出による略式コードですが、そのアイディアを得るべきです。
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機能を使用することができますが、私はあなたの例を与えることをしようとするでしょうAngular2 official documentationによると、角度2