Question

我正在尝试添加一个侧边栏，其中将包含来自api和数据库的一些数据。这将是有关用户帐户和ex的一些基本信息。他的朋友名单。我的想法是采用与我已经在导航器出口之外设置导航栏的方式类似的方式进行操作，该导航栏在用户未登录时隐藏。

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。像这样一个：

profile.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));
    }
}

然后通过路由订阅它：

profile.component.ts

constructor(private route: ActivatedRoute) { }

//...

this.route.data.subscribe((data: { friends: any }) => {
  this.friendsAll = data.friends;
});

因此，现在的问题是如何将数据完全传递到路由之外的边栏中？无论URL和路由如何，它在整个应用程序生命周期中都应包含相同的数据。我还尝试使用另一个所谓的data.service从profile.component传递数据（请参见上文）并在侧边栏组件中订阅它，但是它根本不起作用，因为路由器和解析器似乎在初始化后就开始了侧边栏。

我感谢任何建议。我仍在学习，所以如果您认为我应该以完全不同的方式进行操作，请告诉我，因为我觉得我只是坚持使用这种方法。

修改：

“调试”的好旧方法...; D因此，现在我尝试使用一种服务，只需在侧边栏组件中订阅与在路由器出口内的配置文件中订阅的相同数据。在这里，在上面的屏幕截图中，您有一个示例，说明了在这种情况下完成所有操作的顺序。首先，服务是试图获取数据-不可能，还没有。在侧边栏订阅了此“无”之后，APP最终成功从API接收了数据。之后，该解析程序让配置文件组件运行，并且它正确地订阅了数据。如何让friends.service和sidebar等待API响应，直到未完成？

Answer 1

因此，我想出了另一种方法，仍然使用服务。

您可以订阅此服务，然后在数据准备就绪时使用“主题”通知组件，因此服务将变成这样

friends.service.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']);
           }
        });
    }
}

而组件将全部使用服务的主题，可在加载好友时得到通知

profile.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;

    }
}

sidebar.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;

    }
}

我没有测试它，但是它应该可以工作

如何将数据传递到路由器出口之外的组件？

1 个答案: