Question

当前，我有一个管理页面，该页面显示所有用户信息。我只想将选定的用户信息传递给另一个页面，以便我可以编辑他们的信息，现在我可以导航到下一页，但似乎无法传递数据。如何将用户信息传递到下一页？下面是我当前的代码。

<html>
<table>
<ng-container *ngFor="let content of user">
         <tr *ngIf="content.hasMembership">
                <td >{{content.fullname}}</td>
                <td>{{content.createdIndividualAt | date}}</td>
                <td>{{getMember(content.hasMembership)}}</td>
                <td><a (click)="navigate('userSetting')"><i class="fa fa cog"></i> Setting</a></td>
         </tr>
 </ng-container>
</table> 
</html>

<typescript>
  constructor(private individualSrv: IndividualService,
private router: Router
) {
let res = individualSrv.getAll();
res.then(result => {
  result.subscribe(_user => {
    this.user = _user;
  });
});
}
navigate(path: string) {
console.log("path", path);
this.router.navigate(["/admin/" + path], {
  queryParams: { id: 'this.user.id ' }
});
}
</typescript>

Answer 1

最简单的方法是将选定的用户存储在服务中，路由到其他页面，然后从变量中加载用户。

https://medium.com/@mirokoczka/3-ways-to-communicate-between-angular-components-a1e3f3304ecb

Answer 2

您正在将查询参数中的userId传递到即将到来的路由。要在ext组件中使用它们，您将必须从下一个组件的路线的queryParam映射中访问它们。

执行此操作的最佳位置是即将出现的组件的ngOnInit钩子。

尝试一下：

ngOnInit() {
    this.route.queryParams
      .subscribe(params => {
        console.log(id); // you should have your id here.
      });
  }

您可以将其分配给类变量，然后根据需要使用。

但是，请记住，queryParams显示在浏览器地址栏中的路由Url中。当心以这种方式传递敏感数据。

将选定的用户数据传递到另一个页面（角度）

2 个答案: