Javascript 如何在路由之间共享数据8

我有一个在父组件中返回的JSON数据。您只需在父组件上键入数字“12233”或“34567”，就可以在控制台上看到正在打印的数据

像在child中一样，我想使用来自父级的数据打印{{firstName}}

是否有一种方法可以使用中的路由将数据属性传递给子组件

家长： HTML:

Data.JSON：

{
    "items": {
        "userdata": [
            {
                "firstName": "john",
                "lastName": "doe",
        "number": 12233
            },
            {
                "firstName": "mary",
                "lastName": "jane",
        "number": 34567
            }
        ]
    }
}

儿童： HTML:

孩子工作！{{firstName}}

---

当然，它的工作原理与您的示例相同

将值作为

queryParam

发送，如下所示：

goToChild(firstName) {
  this.router.navigate(['/child'], { skipLocationChange: true, queryParams: {firstName} });
}

public firstName?:string;

constructor(
  private activatedRoute:ActivatedRoute
) { }

ngOnInit() {
  this.activatedRoute.queryParamMap.subscribe(paramMap => this.firstName = paramMap.get('firstName'));
}

然后在子路由上检索它，如下所示：

goToChild(firstName) {
  this.router.navigate(['/child'], { skipLocationChange: true, queryParams: {firstName} });
}

public firstName?:string;

constructor(
  private activatedRoute:ActivatedRoute
) { }

ngOnInit() {
  this.activatedRoute.queryParamMap.subscribe(paramMap => this.firstName = paramMap.get('firstName'));
}

这是工作票

传递对象

如果要传递对象，最好的方法是将对象保存在服务中，并通过上述方法仅传递唯一标识符。如果使用状态管理库，则应该将对象保存在那里，而不是服务

---

我用您的示例对此进行了说明（我还对代码进行了一些清理，使其更易于查看）。

@pascalpuetxz非常感谢您的帮助，您是否知道如何将整个JSON数据传递给下一个组件，如如何传递其中一个参数。那么整个数据呢？如果您想传递整个JSON数据，那么您应该考虑将数据保存在服务（“可注射”）中，或者，如果您有，您的状态管理库（NGXS/NGRX/…）。如果您希望只传递与选定用户相匹配的数据的一部分，那么您应该考虑给用户一个ID，通过查询PARAM或PATH PARAM传递该ID，并向该服务添加一个查找方法。@ Bob用另一个StasBLITHIP@ PASCALPUTZ更新了我的答案，不确定您是否仍然可以看到该消息。您知道如何不返回整个对象{user$| async | json}}，而只分别返回user.firstName、user.lastName等值。您是最棒的，非常感谢您，干杯！所有的选择都有效，我会根据需要使用最好的。

public firstName?:string;

constructor(
  private activatedRoute:ActivatedRoute
) { }

ngOnInit() {
  this.activatedRoute.queryParamMap.subscribe(paramMap => this.firstName = paramMap.get('firstName'));
}