1
我一直在这一天的大部分时间摔跤。基本上我的应用程序布局，像这样Angular2 - 不同级别的组件之间的持续服务
app.component.ts
-- navigation.component.ts : i.e this selector is in the app.component
-- router-outlet
基本上导航栏在那里我有我的所有登录的逻辑，我使用火力地堡，这是人的奇迹发生，用户登录，他们的形象是在右上角和他们的名字等等。这一切都很可爱。我的问题是我想与其他组件共享这些数据。在此之后，我在前面提供了一些有用的建议，我设置了一个服务，将数据从nav组件传递到显示的其他组件之一，这是一个动态组件，这意味着当您点击一个动态加载的链接，而导航组件保持静态因为它与路由器插座的水平相同。所以当我第一次访问页面时，数据看起来没有问题，我想这是因为构造函数触发一次，一切都按预期工作，但是当你回到没有..没有用户数据传递给这个组件时，因为导航组件doest曾经做过ngOnInit，除了当网站第一次加载时，如果你在那条路上......我希望我已经做了很好的解释，我对angular2比较新，所以仍然在学习......有些东西来进入我的脑袋也许是这种事情可以用某种方式实现更先进的observables或事件发射器可能？
SERVICE.TS
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...
}
}
模板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();
}
}