查询参数未存储正确的值答案

【问题标题】：Query param is not storing the right value查询参数未存储正确的值
【发布时间】：2020-12-14 02:52:08
【问题描述】：

如果这个问题很愚蠢，我是一个新程序员，很抱歉......我正在尝试让我的路由器重定向到这个链接，以将我的 viewMode 的值设置为 3，并使用查询参数更改链接。到目前为止，链接正确更改并正确显示https..../?sidePanelMode=3，但是当我console.log viewMode 的值时，它没有改变。我不确定如何正确设置值，有人可以在这里帮助我吗？

这是我的 .service 中重定向到组件的代码：

case 13: // Commented on project
                this.router.navigate([`/translate/:mode/${notification.entityID}`], { queryParams: { viewMode: 3 } });
                break;

这是导入所有必要的组件和指令后的component.html，

    constructor(private activatedRoute: ActivatedRoute){
    
}

ngOnInit() {
    console.log("view mode is: " + this.viewMode);
}

export class EditorComponent implements OnInit { 
    sidePanelMode = -1; 
}

【问题讨论】：

标签： angular query-parameters

【解决方案1】：

这里有两种不同类型的参数，route params 和 query params。

路由参数用于将 URL 的一部分标识为参数值，应在您的路由文件（例如 app-routing.module）中的 Routes 字段中进行定义。

因此，在您的路由器中，您只需将值传递给导航，并且可以在组件中获取，例如

routes = [
  {
    path: "translate/:viewMode",
    component: EditorComponent,
  },

app-routing.module.ts

this.router.navigate([`/translate/${viewMode}/${notification.entityID}`])

或者您可以指定为单独的数组条目：this.router.navigate(['/translate',viewMode,notification.entityId])

并在组件内读取值

ngOnInit() {
    console.log("view mode is: " + this.activatedRoute.snapshot.paramMap.get('viewMode'));
}

您可以在以下位置查看更多示例：https://angular.io/guide/router-tutorial-toh#route-parameters

查询参数用于在 URL 后附加 ? 并从那里读取值时，如果您想跨多个路由保留变量，通常更有用。它们以类似（但不同）的方式处理，示例位于：https://angular.io/guide/router-tutorial-toh#query-parameters-and-fragments

【讨论】：