我试图添加一个侧边栏，其中包含一些来自api和数据库的数据。这将是一些关于用户帐户和前他的朋友名单的基本信息。我的想法是以类似的方式来做，我已经建立了一个导航栏-在路由器出口外面，当用户没有登录时隐藏。
app.component.html软件
<header *ngIf="userIsLogged == true">
<app-header></app-header>
</header>
<div *ngIf="userIsLogged == true" id="animated-bar">
<app-side-bar></app-side-bar>
</div>
<router-outlet></router-outlet>
但我在将数据传递到这个侧边栏时遇到了一个问题。为了为所有视图提供正确的数据（路由器内部），我使用的是解析器，F.EX。
配置文件.resolve.service.ts
export class FriendResolve implements Resolve<FriendModel[]> {
constructor(private _api: ApiService) {
}
resolve(route: ActivatedRouteSnapshot) {
let id = localStorage.getItem("id");
return this._api.getFriendsList(parseInt(id));
}
}
然后通过路由订阅：
剖面图.component.ts
constructor(private route: ActivatedRoute) { }
//...
this.route.data.subscribe((data: { friends: any }) => {
this.friendsAll = data.friends;
});
所以现在的问题是如何将数据传递到完全不在路由范围内的侧边栏？
无论是URL还是路由，它都应该包含整个应用程序生命周期中的相同数据。我还试图使用另一个所谓的DATA服务从Primule.Engices（见上文）传递数据，并在侧栏组件中订阅它，但它根本不起作用，因为路由器和解析器似乎在侧栏初始化之后开始。
我很感激你的建议。我还在学习所以如果你认为我应该完全不同的方式告诉我，因为我觉得我只是用那种方法。
编辑：
“调试”的老方法…现在，我尝试使用一个服务，只需简单地订阅侧边栏组件到我在路由器出口中的配置文件中订阅的相同数据。在上面的截图中，你有一个例子，说明了在这个场景中所有事情的顺序。首先，服务试图获取数据-不可能，目前还没有。之后，侧边栏订阅这个“无”，最后应用程序成功地从api接收数据。之后，解析器允许profile组件运行，并正确订阅数据。
如何让friends.service和侧边栏等待api响应，直到它完成？
最佳答案
所以，我提出了另一种方法，仍然使用服务。
您可以订阅此服务，然后在数据准备就绪时使用主题通知组件，因此服务将如下所示
朋友服务.ts
export class FriendsService {
get friends(): any[] {
return this._friends;
}
private _friends: any[];
private friendsSet: Subject<any[]>;
public friendsSet$: Observable<any[]>;
constructor(private apiService: ApiService,
private route: Router){
this.friendsSet = new Subject<any[]>();
this.friendsSet$ = this.friendsSet.asObservable();
this.init();
}
private init(){
this.route.data.subscribe((data) => {
if(data.hasOwnProperty('friends')){
this.friendsSet.next(data['friends']);
}
});
}
}
而组件都将使用服务的可观察主题，以便在加载好友时得到通知
剖面图.component.ts
export class ProfileComponent implements OnInit {
private _friends: any[];
constructor(private friendsService: FriendsService){
}
ngOnInit(): void {
this.friendsService.friendsSet$.subscribe((friends) => {
console.log(friends);
});
this._friends = this.friendsService.friends;
}
}
侧边栏.component.ts
export class SidebarComponent implements OnInit {
private _friends: any[];
constructor(private friendsService: FriendsService){
}
ngOnInit(): void {
this.friendsService.friendsSet$.subscribe((friends) => {
console.log(friends);
});
this._friends = this.friendsService.friends;
}
}
我没有测试，但应该可以