Question

如何强制ui路由器在我的状态下重新加载解析而不重新加载整个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)})
            }]
        },

我想更改$ transition $ .params。{start | count}并更新解析而不重新加载html。

Answer 1

您要求的内容无法开箱即用。只有在输入状态时才会解析结算。

但是：刷新数据的一种方法是检查$ 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
          }
       })
    }
  }
}

然后你不再在父组件中绑定了，因为它＆＃34;解析＆＃34;数据本身，您必须手动将它们绑定到子组件 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
  }
}

只重新加载解析而不重新加载html

1 个答案: