只重载解决不重载html

Question

我如何强制 ui 路由器重新加载我状态的解析而不重新加载整个 ui/controller 因为

我正在使用组件，因为数据是从状态解析中绑定的，我想更改一些参数（例如分页）而不强制整个 ui 重新加载，而只是 resolves

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

您所要求的是开箱即用的。 Resolves只有在进入状态时才被解析。

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

那么你就没有父组件的绑定了，因为它"resolves"数据本身，你必须手动将它们绑定到子组件IF 您将它们插入到父组件的模板中，例如：

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

如果通过视图加载子项，显然无法以这种方式绑定数据。有一个小技巧，但是有点hacky。

解决方案 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 }}

我希望，我通过这个 hack 表达了我的自我。请记住：这与 UI-Router 的概念有点偏离，但是有效。

注意：记得将参数声明为动态的，这样更改不会触发状态重新加载：

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

只重载解决不重载html

Only reloading resolves without reloading html

angular-ui-router