Angularjs 如何使用UI路由器向组件发送参数？

角度版本：v1.5.11

用户界面路由器版本：v0.4.2

我正在尝试根据URL向组件发送参数。但是，我试图在组件内部读取的参数似乎超出了范围。我已经试着研究了一段时间，并阅读了一些文档，但我无法理解这一点

当URL为：/#时/手机/摩托罗拉xoom

浏览器中的输出为：

TBD:{{$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);
    }]);

'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;
    }]
  });

this.phoneId = pid.phoneId;

根据JB Nizet的第一条评论，这对我来说是有意义的。基于“$stateParams服务”部分，我的印象是，最初在resolve中定义的“键”（？）可能是任意的——显然，我在这里误解了一些重要的东西，因为情况似乎并非如此

我尝试在控制器中使用$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;
    }]
};

var-detailState={
姓名：'电话详情'，
url:“/phones/{phoneId}”，
模板：“{{$ctrl.phoneId}}的TBD:Detail视图”，
控制器：['$stateParams'，函数PhoneDetailController（$stateParams）{
log（$stateParams.phoneId）；
this.phoneId=$stateParams.phoneId；
}]
};

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

---

编辑2:

---

解决方案：

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

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'
};

var-detailState={
姓名：'电话详情'，
url:“/phones/{phoneId}”，
模板：“{{$ctrl.phoneId}}的TBD:Detail视图”，
控制器：['$stateParams'，函数PhoneDetailController（$stateParams）{
log（$stateParams.phoneId）；
this.phoneId=$stateParams.phoneId；
}],
controllerAs:“$ctrl”
};

此外，对于@nicooga引用的组件路由，是一个很好的资源。

来自“Edit#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'
};

var-detailState={
姓名：'电话详情'，
url:“/phones/{phoneId}”，
模板：“{{$ctrl.phoneId}}的TBD:Detail视图”，
控制器：['$stateParams'，函数PhoneDetailController（$stateParams）{
log（$stateParams.phoneId）；
this.phoneId=$stateParams.phoneId；
}],
controllerAs:“$ctrl”
};

如果ourput是{{{$ctrl.phoneId}}的详细视图，那么您很可能在控制台中有错误，无法插入此表达式。阅读并张贴。既然您知道$stateParams.phoneId包含您期望的值，为什么不使用$stateParams.phoneId呢。

pid

应该是什么，为什么它会被注入控制器，为什么它会包含您的状态参数？@jb nizet感谢您的建议。我已经用“编辑#1”更新了我的原始帖子，以回答您的问题并发布请求的错误。您的修复是正确的。解析是完全无用的，因为它所做的只是返回一些在$stateParams中非常有用的东西。在您的原始代码中，

bindings:{pid:'@jb niset从“Edit#2”中可以看到，正在加载带有我的修复程序的代码，控制台中没有错误，可以将我的$stateParams.phoneId属性打印到控制台，并且仍然存在插值问题。感谢您提供有关我的原始代码的信息。我正在遵循AngularJS（phonecat）和UI路由器教程尽了我最大的努力，但我在这里做得不够。如果我想像我最初尝试的那样向组件发送参数，建议的解决方案是什么？我不需要寻找任何直接的答案——链接到好的参考资料。看看