将 resolve 参数传递给 UI 路由器中的 angular1 组件

Question

我正在尝试将我的解析参数传递给 angular 一个使用 ui 路由器的组件。我的 UIRouter 配置如下：-

.state(memberConstants.memberMVLicense, {
            url: "/mvlicense",
            template: '<member-mvlicense member-id="$resolve.memberId" members="$resolve.members"></member-mvlicense>',
            resolve: {
                memberId: ["$stateParams", function ($stateParams) {
                    return $stateParams.memberId;
                }],
                members: ["$stateParams", "$q", "factory.membersMVLicenses",
                    function ($stateParams: ng.ui.IStateParamsService, $q: ng.IQService,
                        membersMVLicensesService: data.member.IMembersMVLicensesService) {
                        var deferred = $q.defer();
                        membersMVLicensesService.getByMemberId($stateParams["memberId"]).then((response) => {
                            // response is not null and I got some data for sure
                            deferred.resolve(response);
                         });
                        return deferred.promise;
                }]
            }
  })

在我的组件中，我可以在执行控制台日志时看到 memberId，但在执行 console.log 时成员始终未定义。我很确定在我的路线解析中我没有正确传递它但我似乎无法让它工作。我在下面的图片中可以看到一个 console.log stamement 打印数字和一个 console.log 打印未定义。任何帮助将不胜感激

module app.member {

    class MemberMvlicenseGrid implements ng.IComponentOptions {
        public controller: any;
        public template: string;
        public templateUrl: string;
        public transclude: boolean;
        public controllerAs: string;
        public bindings: { [boundProperty: string]: string };
        constructor() {

            this.controller = MemberMVLicenseGridController;
            this.templateUrl = "app/member/member-mvlicense-grid.html";
            this.transclude = false;
            this.controllerAs = "vm";
            this.bindings = {
                "memberId": "<",
                "members": "<"
            };
        }
    }

 class MemberMVLicenseGridController implements ng.IController {

        public memberId: string;
        public members: model.member.IMembersMVLicensesResult[];

        public $onInit(): void {
           console.log(this.memberId);;
           console.log(this.members);
        }
 }
  angular.module("app.member").component("memberMvlicenseGrid", new                  MemberMvlicenseGrid());
}

Answer 1

据我从你的 devtools 截图中可以看出，组件 memberMvlicenseGrid 没有传递任何 members 属性，只有 memberId 传递：

<member-mvlicense-grid member-id="vm.memberId" class="...">

当您在其控制器中登录 this.members 时，预计您会得到未定义的信息。

您很可能想将 memberMvlicense 组件的模板调整为

<member-mvlicense-grid member-id="vm.memberId" members="vm.members">

将 resolve 参数传递给 UI 路由器中的 angular1 组件

Pass resolve parameter to angular1 component in UI Router

angularjs

angular-ui-router

angular-components