Question

我正在开发一个AngularJS / Ui-router项目。我有两种状态：

STATE1
state2（state1的子状态）

州代码：

app.config(function($stateProvider){
  $stateProvider.state('state1', {         
    url : '/state1',
    component : 'state1cpt',
    resolve : {
      state1data : function(){
        return {'x':1, 'y':2, 'z':3};
      }
    }
  });
  $stateProvider.state('state1.state2', {
    url : '/state2',
    component : 'state2cpt'
  });
});

每个州都有一个组成部分：

app.component('state1cpt', {
  bindings : {
    state1data : '<'
  },
  templateUrl : 'state1.html'
});

app.component('state2cpt', {
   templateUrl : 'state2.html'
});

和观点：

的index.html

<a ui-sref="state1">State1</a>
<ui-view></ui-view>

state1.html

<h2>State1 x: {{$ctrl.state1data.x}}</h2>
<a ui-sref="state1.state2">State2</a>
<ui-view></ui-view>

state2.html

<h2>State2</h2>

如何将 state1data 对象传递给 state2 ？有什么更好的方法呢？（在解析state2时，还是在state2的控制器中？）

奔跑的掠夺者：http://plnkr.co/edit/HDt0f4wzjyUVQ7lEI9YB?p=preview

Answer 1

只需在组件定义中使用绑定 - 仍然可以在所有子状态中使用来自父状态的已解析function GetCellTemplate(fieldName, validationFieldName) { var template = "<div><input type=\"text\" data-bind=\"visible: $parent.selected(), value: $parent.entity[" + fieldName + "]\" />" + " <span data-bind=\"visible: !$parent.selected()," + " text: $parent.entity[" + fieldName + "]," + " css: $parent.entity." + validationFieldName + " === 'True' ? \'passed-validation\' : \'failed-validation\'\">" + " </span>" + "</div>"; ... }。

state1data

<强> state2.html

app.component('state2cpt', {
  bindings : {
    state1data : '<'
  },
  templateUrl : 'state2.html'
});

或者如果你不想使用绑定 - 你可以在<h2>State2</h2> <pre>{{$ctrl.state1data | json}}</pre>控制器中注入state1data

Answer 2

我会在url中使用参数，毕竟你使用ui-router来设置你的url定义的状态。

HTML

<a ui-sref="state1({x:1,y:2,z:3})">State1</a>


<a ui-sref="state1.state2({x:3,y:4,z:3})">State2</a>

JS

app.config(function($stateProvider){
  $stateProvider.state('state1', {
    url : '/state1/{x:int}/{y:int}/{z:int}',
    component : 'state1cpt'
  });
  $stateProvider.state('state1.state2', {
    url : '/state2/{x:int}/{y:int}/{z:int}',
    component : 'state2cpt'
  });
});

app.component('state1cpt', {
  templateUrl : 'state1.html',
  controller: function($stateParams){
    this.x = $stateParams.x;
    this.y = $stateParams.y;
    this.z = $stateParams.z;
  }
});

app.component('state2cpt', {
  templateUrl : 'state2.html'
});

plunker： http://plnkr.co/edit/37e38xokN3bMrF64VZQ6?p=preview

angularjs - 在组件之间传递对象

2 个答案: