使用包含多个绑定的组件配置ui路由器

Configure ui-router with components containing multiple bindings

本文关键字：组件 配置 ui 路由器 绑定 包含多      更新时间：2023-09-26

我正试图找到一个更好的解决方案，将ui-router与angular components一起使用。

考虑两个简单的组件：

app.component('componentOne', {
  template: '<h1>My name is {{$ctrl.name}}, I am {{$ctrl.age}} years old.</h1>',
  bindings : {
      name : '@',
      age : '@'
    }
  }
);
app.component('componentTwo', {
  template: '<h1>I am component 2</h1>'
});

现在，我正在使用template属性指定组件及其参数：

 app.config(function($stateProvider, $urlRouterProvider ){
 $stateProvider
    .state('component1', {
      url: "/component1",
      template: "<component-one name='"foo'" age='"40'"></component-one>"
    })
    .state('component2', {
      url: "/component2",
      template: "<component-two></component-two>"
    })
});

虽然这很好，但我有大约十个绑定的组件，这使得ui-router的配置非常尴尬。

我尝试使用component属性，但这对我根本不起作用。我找到的唯一其他解决方案是使用require属性指定父级并省略绑定，但这对我来说不太合适…有更好的方法吗？

这是一个plnkr。

UI路由器component:路由存在于UI路由器1.0+（当前版本为1.0.0-beta.1）中

这是一个更新的plunker：https://plnkr.co/edit/VwhnAvE7uNnvCkrrZ72z?p=preview

绑定静态值

要将静态数据绑定到组件，请使用component和返回静态数据的解析块。

$stateProvider.state('component1', {
  url: "/component1",
  component: 'componentOne', 
  resolve: { name: () => 'foo', age: () => 40 }
})

绑定异步值

要绑定异步值，请使用一个解析，该解析返回数据的promise。请注意，一个解决方案可能取决于不同的解决方案：

$stateProvider.state('component1Async', {
  url: "/component1Async",
  component: "componentOne",
  resolve: {
    data: ($http) => $http.get('asyncFooData.json').then(resp => resp.data),
    name: (data) => data.name,
    age: (data) => data.age
  }
});

绑定大量值

您提到您在一个组件上有10个绑定。根据您绑定的数据的结构，您可以使用JavaScript来构建resolve块（毕竟"只是JavaScript"）

var component2State = {
  name: 'component2',
  url: '/component2',
  component: 'componentTwo',
  resolve: {
    data: ($http) => $http.get('asyncBarData.json').then(resp => resp.data)
  }
}
function addResolve(key) {
  component2State.resolve[key] = ((data) => data[key]);
}
['foo', 'bar', 'baz', 'qux', 'quux'].forEach(addResolve);
$stateProvider.state(component2State);

或者，您可以将绑定向下移动一级，并创建一个将成为唯一绑定的对象。如果10个绑定是困扰你的。

您可以尝试的一种替代方案是通过$stateChangeStart事件中状态的自定义属性覆盖模板。

像这样运行block可以实现这种行为。

app.run(function($rootScope){
    //listen to $stateChangeStart
    $rootScope.$on("$stateChangeStart",function(event, toState, toParams, fromState, fromParams, options){
    //if the component attribute is set, override the template
    if(toState.component){

      //create element based on the component name
      var ele = angular.element(document.createElement(camelCaseToDash(toState.component)));
      //if there is any binding, add them to the element's attributes.
      if(toState.componentBindings){
        angular.forEach(toState.componentBindings,function(value,key){
          ele.attr(key,value)
        })
      }
      //you may also do something like getting bindings from toParams here
      //override the template of state
      toState.template = ele[0].outerHTML;
    }

  })
  //convert camel case string to dash case
  function camelCaseToDash(name) {
    return name.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
  }
})

现在，您可以在状态配置中拥有component属性。

app.config(function($stateProvider, $urlRouterProvider ){
 $stateProvider
    .state('component1', {
      url: "/component1",
      component:"componentOne",
      componentBindings:{
        name:"foo",
        age:"40",
      }
    })
    .state('component2', {
      url: "/component2",
      component:"componentTwo",
    })
});

这是正在工作的plunker。

尽管如此，你可能有一个很大的配置函数，但它看起来不会那么尴尬。

相关文章：