Question

Angular版本： v1.5.11

UI-Router版本： v0.4.2

我正在尝试根据URL向组件发送参数。但是，看起来我试图在组件内部读取的参数超出范围。我已经尝试过研究一段时间并阅读文档，但我无法弄清楚这一点。

当网址为： /＃！/ phones / motorola-xoom

浏览器中的输出是：

待定：{{$ ctrl.phoneId}}
的详情视图

我认为相关的代码如下：

./ app.config.js

'use strict';

angular.module('phonecatApp')
    .config(['$locationProvider', '$stateProvider', function($locationProvider, $stateProvider){
        $locationProvider.hashPrefix('!');

        var phoneListState = {
            name: 'phone-list',
            url: '/phones',
            template: '<phone-list></phone-list>'
        };

        var detailState = {
            name: 'phone-detail',
            url: '/phones/{phoneId}',
            component: 'phone-detail',
            resolve: {
                pid: ['$stateParams', function($stateParams){
                    console.log($stateParams.phoneId);
                    return $stateParams.phoneId;
                }]
            },
            template: '<phone-detail></phone-detail>'
        };

        $stateProvider.state(phoneListState);
        $stateProvider.state(detailState);
    }]);

./电话细节/电话detail.component.js

'use strict';

angular.
  module('phoneDetail').
  component('phoneDetail', {
    bindings: {pid: '<'},
    template: 'TBD: Detail view for <span>{{$ctrl.phoneId}}</span>',
    controller: [function PhoneDetailController(pid){
      this.phoneId = pid.phoneId;
    }]
  });

你可能会注意到这一行： console.log（$ stateParams.phoneId）

这似乎是打印＆＃34; motorola-xoom＆＃34;到控制台。出于某种原因，我无法在我的组件内部阅读它。

非常感谢任何帮助。

修改1：

我在控制台中看到的错误是：

TypeError：无法读取属性＆＃39; phoneId＆＃39;未定义的在新的PhoneDetailController

这发生在 ./ phone-detail / phone-detail.component.js

的第10行

this.phoneId = pid.phoneId;

根据JB Nizet的第一条评论，对我来说哪种方式有意义。基于 $ stateParams Service 部分下的this documentation，我的印象是，在解析中首次定义的＆＃34;键＆＃34;（？）可能是任意的 - - 显然我误解了一些重要的事情，因为情况似乎并非如此。

我尝试在控制器中使用 $ stateParams.phoneId ，但仍然无法进行插值。

或者，我尝试完全从我的州定义中删除该组件并尝试类似

var detailState = {
    name: 'phone-detail',
    url: '/phones/{phoneId}',
    template: 'TBD: Detail view for <span>{{$ctrl.phoneId}}</span>',
    controller: ['$stateParams', function PhoneDetailController($stateParams){
        console.log($stateParams.phoneId);
        this.phoneId = $stateParams.phoneId;
    }]
};

我期望在控制台中打印的值，控制台中没有错误，但插值仍然失败。

编辑2：

解决方案：

来自＆＃34;编辑＃2＆＃34;的解决方案几乎是正确的。需要添加别名。

var detailState = {
    name: 'phone-detail',
    url: '/phones/{phoneId}',
    template: 'TBD: Detail view for <span>{{$ctrl.phoneId}}</span>',
    controller: ['$stateParams', function PhoneDetailController($stateParams){
        console.log($stateParams.phoneId);
        this.phoneId = $stateParams.phoneId;
    }],
    controllerAs: '$ctrl'
};

此外，here是关于路由到@nicooga引用的组件的良好资源。

Answer 1

“编辑＃1”的解决方案几乎是正确的。需要添加别名：

var detailState = {
    name: 'phone-detail',
    url: '/phones/{phoneId}',
    template: 'TBD: Detail view for <span>{{$ctrl.phoneId}}</span>',
    controller: ['$stateParams', function PhoneDetailController($stateParams){
        console.log($stateParams.phoneId);
        this.phoneId = $stateParams.phoneId;
    }],
    controllerAs: '$ctrl'
};

如何使用UI-Router向组件发送参数？

1 个答案: