将对象传递给 Angular 9/10 解析器答案

【问题标题】：Passing an object into Angular 9/10 resolver将对象传递给 Angular 9/10 解析器
【发布时间】：2021-01-22 04:53:02
【问题描述】：

我被困在 Angular 9/10 中将对象传递给解析器。任何帮助将不胜感激。

我有一个页面SearchUser.component.ts，我从该页面导航到另一个页面UserInfo.component.ts。我正在尝试在解析器中传递对象，它可以使用用户对象模型执行我的服务。

A) SearchUser.component.ts

viewUser() {
    /*Data to be posted before the User info page is displayed*/
    let data = {
        "UserId": 1 "UserName": "David",
        "Department": "Physics"

    }

    /*STEP_1 Payload on the router*/
    const navigationExtra: NavigationExtras = { state: data };
    this.router.navigate(['Default/ApplicationDisplay', navigationExtra]);
}

B) resolve-user.guards.ts
（在第 2 步，我期待可以在 API 上发布的数据）。但它显示的是空值。

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree, Resolve, Router } from '@angular/router';
import { Observable } from 'rxjs';
import { MyUserService } from '../services/my-user.service';

@Injectable({
    providedIn: 'root'
})
export class ResolveApplicationDetailsGuard implements Resolve < userList > {
    private postData: any;
    constructor(private _myUserService: MyUserService, private router: Router) {
        this.postData = router.getCurrentNavigation().extras.state; //STEP_2 
    }

    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable < userList > | Promise < userList > | userList {
        return this._myUserService.GetUsersData(this.postData);
    }

}

UserInfo.component.ts

getUserInfo() {
    //STEP_3
    this.activatedRoute.snapshot.data['userList'];
}

app-routing.ts

path: 'UserInfo',
    component: UserInfoComponent,
    resolve: {
        userList: UserInfoGuard
    }

如果有人能指出正确的方向，我会很感激，因为我肯定错过了一些东西。

【问题讨论】：

标签： angular angular-resolver angular-component-router

【解决方案1】：

我读对了吗 - let data 与 const navigationExtra 不在同一范围内（它在 viewUser 方法内）？

如果navigationExtra 超出viewUser 方法，则不能这样做{state:data}，因为在此范围内无法访问数据。您必须将 data 分配给组件自己的属性，然后像这样声明 const navigationExtra：

navigationExtra: NavigationExtras = {state: this.data};

【讨论】：

谢谢 Aleks，让我试试你的建议。
好的。现在我明白了，我错了 - data 和 navigationExtra 在 viewUser 方法的同一范围内..Tabing 是不合适的。所以我的解决方案可能无法解决问题..

【解决方案2】：

您可以按照以下步骤操作：

Send data through routing paths in Angular

我不确定，但您可以尝试在此行末尾添加数据。

this.postData = router.getCurrentNavigation().extras.state.data;

【讨论】：