只有重装做出决议无需重新加载HTML

我怎么能强迫UI路由器重新载入我的状态做出决议没有因为只有重装做出决议无需重新加载HTML

我使用的部件重新加载整个UI /控制器，因为数据是从国家的决心绑定，我想改变一些参数（分页为例），而不强迫整个UI重新加载，但只是做出决议

resolve : { 
      data: ['MailingListService', '$transition$', function (MailingListService, $transition$) { 
       var params = $transition$.params(); 
       var ml = params.id; 
       return MailingListService.getUsers(ml, params.start, params.count) 
        .then(function (result) { 
         return { 
          users: result.data, 
          totalCount: result.totalCount 
         } 
        }) 
      }], 

      node: ['lists', '$transition$', function (lists, $transition$) { 
       return _.find(lists, {id: Number($transition$.params().id)}) 
      }] 
     },

我想改变$过渡$ {.params开始|数}和有决心无需重新加载html即可更新。

来源

2017-09-25 forcewill

你要求的是不可能开箱的。只有在进入状态时才能解决问题。

但是：刷新数据的一种方法可能是检查$ doCheck中的状态参数更改并将它们手动绑定到组件。

解决方案1 

这可能是这个样子：

export class MyComponent { 
    constructor($stateParams, MailingListService) { 
    this.$stateParams = $stateParams; 
    this.MailingListService = MailingListService; 

    this.paramStart = null; 
    this.paramCount = null; 
    this.paramId = null; 
    this.data = {}; 
    } 

    $doCheck() { 
    if(this.paramStart !== this.$stateParams.start || 
     this.paramCount !== this.$stateParams.count || 
     this.paramId !== this.$stateParams.id) { 

     this.paramStart = this.$stateParams.start; 
     this.paramCount = this.$stateParams.count; 
     this.paramId = this.$stateParams.id; 

     this.MailingListService.getUsers(this.paramId, this.paramStart, this.paramCount) 
     .then((result) => { 
      this.data = { 
      users: result.data, 
      totalCount: result.totalCount 
      } 
     }) 
    } 
    } 
}

那你有没有在父组件绑定了，因为它本身“解析”的数据，你有用手将它们绑定到子组件IF您将它们插入父组件的模板中，例如：

<my-component> 
    <my-child data="$ctrl.data"></my-child> 
</my-component>

如果你通过视图加载孩子，你很显然无法以这种方式绑定数据。有一个小窍门，但它有点哈克。

解决方案2

首先，解决一个空对象：

resolve : { 
    data:() => { 
    return { 
     value: undefined 
    }; 
    } 
}

现在，分配就像一个绑定到所有组件：

bindings: { 
    data: '<' 
}

继从代码示例上面，在您解析$ doCheck中的数据的位置，数据分配如下所示：

export class MyComponent { 

    [..] 

    $doCheck() { 
    if(this.paramStart !== this.$stateParams.start || 
     this.paramCount !== this.$stateParams.count || 
     this.paramId !== this.$stateParams.id) { 

     [..] 

     this.MailingListService.getUsers(this.paramId, this.paramStart, this.paramCount) 
     .then((result) => { 
      this.data.value = { 
      users: result.data, 
      totalCount: result.totalCount 
      } 
     }) 
    } 
    } 
}

而在去年，你检查像孩子成分的变化：

export class MyChild { 
    constructor() { 
    this.dataValue = undefined; 
    } 

    $doCheck() { 
    if(this.dataValue !== this.data.value) { 
     this.dataValue = this.data.value; 
    } 
    } 
}

在你的孩子的模板，您访问数据：

{{ $ctrl.dataValue | json }}

我希望，我做了我自己清楚这个黑客。请记住：这与UI-Router的概念有点相似，但是起作用。

注意：记住申报参数动态的，所以变化不会触发状态重装：

params: { 
    start: { 
    dynamic: true 
    }, 
    page: { 
    dynamic: true 
    }, 
    id: { 
    dynamic: true 
    } 
}

来源

2017-10-02 13:18:07 scipper

只有重装做出决议无需重新加载HTML

回答

相关问题