2016-12-29 51 views
0

我正尝试使用ui路由器将我的解析参数传递给角度一个组件。我UIRouter配置如下: -将解析参数传递给UI路由器中的angular1组件

.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()); 
} 

enter image description here

+0

这是角1或2,因为你的代码是这样angular1 –

+0

这是打字稿 –

回答

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

谢谢角1最有可能的,我意识到这只是一个一会儿之后,当我发布这个问题,但接受你的答复作为答案,因为你已经拿起了正确的东西 –

相关问题