如何在页面之间传递Angular中的参数

Posted 2023-03-13

【中文标题】如何在页面之间传递Angular中的参数

【英文标题】：How to pass parameters in Angular between pages

【发布时间】：2021-07-07 18:18:49

【问题描述】：

我的 Node.js 后端以 JSON 形式返回 AWS Cognito 令牌，这些令牌在我的 Angular login 组件中接收。

我希望打开我的dashboard 并传递收到的令牌 在我的login.component.ts 函数中我做：this.router.navigate(['/dashboard', tokens: data ]); 在发送数据之前我将它打印到控制台，它看起来很好

在我的dashboard.component.ts 中，我不确定为什么令牌无法访问

import  Component, OnInit  from '@angular/core';
import  ActivatedRoute, Router  from '@angular/router';

constructor(private route: ActivatedRoute, private router: Router)    

ngOnInit() 

this.route.queryParams.subscribe(params => 
            console.log('params = ' + params);
            var data = params['tokens'];
            console.log('data = ' + data);
            for(let key in data)
                console.log('key = ' + key + ' data= ' + data[key]);
            
        );

这是“console.log”输出params = [object Object]data = undefined

我做错了什么？

【参考方案1】：

您发送的是参数而不是查询参数，因此您的代码应该是：-

this.route.params.subscribe(params => 
            console.log('params = ' + params);
            var data = params['tokens'];
            console.log('data = ' + data);
            for(let key in data)
                console.log('key = ' + key + ' data= ' + data[key]);
            
        );

【讨论】：

我仍然无法访问令牌这是console.log params = [object Object] data = undefined

你能提供一个stackblitz吗？

不知道怎么创建