javascript - 必须在订阅中嵌套服务调用的 Angular 5 activatedroute

Question

我有一个带有路由的 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 内部我知道我需要解析查询字符串 然后我需要进行一个传递所有参数的服务调用

当我将它们分开时，如果没有及时处理菜单并且不会发生菜单服务调用，则条件 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);
                })

   }

Answer 1

你可以使用 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()