Question

我正在尝试使用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打印undefined。任何帮助将非常感谢

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">

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

1 个答案: