1
Iveはほとんどの日、これと対戦しています。私はすべての私のログインロジックを持っている基本的に私のアプリケーションのレイアウトはとてもAngular2 - 異なるレベルのコンポーネント間で永続的なサービス
app.component.ts
-- navigation.component.ts : i.e this selector is in the app.component
-- router-outlet
のような基本的にはナビゲーションバーがあると、私はFirebaseを使用していますが、これは魔法が起きた、ユーザーがログインし、その画像は右上にあり、彼らの名前など。そのすべての素敵な。私の問題は、このデータを他のコンポーネントと共有したいということです。ここでは、ここでいくつかの役に立つアドバイスの後に、Navコンポーネントから表示される他のコンポーネントの1つにデータを渡すサービスをセットアップしました。これは動的コンポーネントです。つまり、リンクをクリックすると動的にロードされますそれはルーターのアウトレットと同じレベルです。だから私のサービスで最初にページにアクセスしたときにデータには何の問題もないようですが、これはコンストラクタが一度だけ起動し、すべてが期待どおりに動作するためだと思います。ナビゲーションコンポーネントdoestがngOnInitを行うのは、サイトが初めてロードされるときを除いて、あなたがその非常にルート上にいる場合を除いて、ngOnInitを実行するからです。私はこれを説明するうまくやっていればいいと思います。私の頭の中にはおそらくもっと先進的な観測やイベントのエミッターで何らかの形で達成できる何かがありますか？
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject';
// https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service
@Injectable()
export class UserdataService {
// Observable string sources
private shareUserDataSRC = new Subject<string>();
// Observable string streams
userDataAvailable$ = this.shareUserDataSRC.asObservable();
passUserToService(userdata: string) {
this.shareUserDataSRC.next(userdata);
console.log(" service " + userdata);
}
}
NAVIGATION.TS
import { Component, OnInit, Input } from '@angular/core';
import { Router } from '@angular/router';
import { UserdataService } from '../userdata.service';
@Component({
selector: 'app-navigation',
template: `
<header class="mast-head">
<ul class="list-reset logged-in">
<li class="user-welcome">
<span>Hi, </span>
<a class="go-to-profile" href="#">{{ user?.name }}</a>
<i class="open-options"></i>
</li>
</ul>
</header>
<aside class="side-drawer">
</aside>
`,
styleUrls: ['./navigation.component.css']
})
export class NavigationComponent implements OnInit {
user = {};
constructor( private router: Router, private shareUser: UserdataService) {
}
ngOnInit() {
console.log(this.user);
}
private _changeState(user: any = null) {
if(user) {
this.user = this._getUserInfo(user)
} else {
this.user = {};
}
}
private _getUserInfo(user: any): any {
if(!user) {
return {};
}
let data = user.auth.providerData[0];
this.shareUser.passUserToService(data);
return {
name: data.displayName,
avatar: data.photoURL,
email: data.email,
provider: data.providerId
};
}
private _getProvider(from: string) {
...STUFF GOING ON HERE...
}
}
TEMPLATE-I-WANT-TO-DISPLAY.TS
import { Component, OnInit } from '@angular/core';
import {Observable} from 'rxjs/Observable';
import { AdInterface} from '../interfaces';
import { Router } from '@angular/router';
import { UserdataService } from '../userdata.service';
import { Subscription } from 'rxjs/Subscription';
@Component({
selector: 'app-list-adverts',
template: `
<h2 class="timestamp">
{{ announced?.uid }}
{{ announced?.displayName }}
{{ announced?.photoURL }}
{{ announced?.email }}
{{ announced?.providerId }}
</h2>
`
})
export class ListAdvertsComponent implements OnInit {
subscription: any;
announced: string;
userServ: any;
constructor(private router: Router, private shareUser: UserdataService) {
this.userServ = this.shareUser.userDataAvailable$;
this.subscription = this.userServ.subscribe(userdata => {
this.announced = userdata;
// console.log(JSON.stringify(this.announced));
});
}
ngOnInit() {
}
ngOnDestroy() {
// prevent memory leak when component destroyed
this.subscription.unsubscribe();
}
}