我正试图找到一个更好的解决方案,将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。
尽管如此,你可能有一个很大的配置函数,但它看起来不会那么尴尬。