Javascript Angular 5 activatedroute必须在subscribe中嵌套服务调用

我有一个带有路由的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>

所以在OnInit里面我知道我需要解析查询字符串 然后我需要进行一个服务调用，传入所有参数

当我把它们分开时，似乎有条件的if-on，如果菜单没有及时处理，就不会发生菜单服务调用

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

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

   }

---

您可以使用filter进行条件检查，并使用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()

 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()