Angular 5激活路由必须在订阅中嵌套服务调用答案

【问题标题】：Angular 5 activatedroute with having to nest service call in the subscribeAngular 5激活路由必须在订阅中嵌套服务调用
【发布时间】：2017-12-11 22:00:51
【问题描述】：

我有一个带有路由的 angular 5 应用程序，其中我的 app.routes.module.ts 文件处理犯罪路线

{ path: 'criminal', component: CriminalComponent, pathMatch: 'full'},

但是，在导航到这里时，我正在将旧网站升级到 Angular，我现在正在使用生成的 URL 链接示例：

<td href="/criminal/?UserID=67694&AppID=4&AppGroupID=13&AM&LoginKey=202088840" >CR Programmers</a></td>

我不确定我是否应该篡改所有这些查询字符串参数的路由文件，因此对于 MENU 一代，我将其放置在其中。

ngOnInit(): void {  .... }

所以在 OnInit 内部我知道我需要解析出查询字符串然后我需要进行一个传递所有参数的服务调用

当我将它们分开时，如果没有及时处理菜单并且不会发生菜单服务调用，则似乎是有条件的。

有没有办法让我的服务调用订阅查询参数部分？

    this.activatedRoute.queryParamMap
        .map((params: Params) => params.params)
        .subscribe((params) => {
            if (params && params['UserID']) {
                let UserID = params['UserID'];
                let AppID = params['AppID'];
                console.log('UserID', UserID);
                console.log('AppID', AppID);
                this.hasMenu = 1;
                console.log('hasmenu', this.hasMenu)

                this.arsSevice.getMenu() //will pass params
                .subscribe(
                result => {
                    this.menuA = result["data"].Menu1Items
                    this.menuB = result["data"].Menu2Items
                    this.menuC = result["data"].Menu3Items
                    this.menuD = result["data"].Menu4Items
                    this.menuE = result["data"].Menu5Items

                },
                error => {
                    console.log('menu error', error);
                })


            }
        });

基本上上面的代码有 getMenu() 调用（当前没有传递参数）

我不想让它嵌套在里面

这部分我更愿意这样做

  if (this.hasMenu == 1) {
     this.arsSevice.getMenu()
                .subscribe(
                result => {
                    this.menuA = result["data"].Menu1Items
                    this.menuB = result["data"].Menu2Items
                    this.menuC = result["data"].Menu3Items
                    this.menuD = result["data"].Menu4Items
                    this.menuE = result["data"].Menu5Items

                },
                error => {
                    console.log('menu error', error);
                })

   }

【问题讨论】：

标签： javascript angular typescript rxjs observable

【解决方案1】：

您可以使用过滤器进行条件检查并使用 flatMap/map 将它们链接起来

 this.activatedRoute.queryParamMap
    .map((params: Params) => params.params)
    .filter((params) => params && params['UserID'])
    .flatMap(params=>{
            ..... your other operation
           return this.arsSevice.getMenu()
     }).map( result => {
                this.menuA = result["data"].Menu1Items
                this.menuB = result["data"].Menu2Items
                this.menuC = result["data"].Menu3Items
                this.menuD = result["data"].Menu4Items
                this.menuE = result["data"].Menu5Items
}).subscribe()

【讨论】：