ui-router/sample-app-angularjs 中的子状态绑定

Question

我正在研究sample app of UI-Router并得到了问题。

在 sample-app-angularjs/app/contacts/editContact.component.js line71~74 中有：

export const editContact =  {
  bindings: { pristineContact: '<' },

  controller: EditContactController,

在 sample-app-angularjs/app/contacts/contacts.states.js line29~38 中有：

export const viewContactState = {
  name: 'contacts.contact',
  url: '/:contactId',
  resolve: {
    // Resolve the contact, based on the contactId parameter value.
    // The resolved contact is provided to the contactComponent's contact binding
    contact: ['Contacts', '$transition$', (Contacts, $transition$) => Contacts.get($transition$.params().contactId)]
  },
  component: 'contactView'
};

并且在 sample-app-angularjs/app/contacts/contacts.states.js line49~61 中有：

export const editContactState = {
  name: 'contacts.contact.edit',
  url: '/edit',
  views: {
    // Relatively target the grand-parent-state's $default (unnamed) ui-view
    // This could also have been written using ui-view@state addressing: $default@contacts
    // Or, this could also have been written using absolute ui-view addressing: !$default.$default.$default
    '^.^.$default': {
      bindings: { pristineContact: "contact" },
      component: 'editContact'
    }
  }
};

我的问题是关于参数pristineContact：

1. 它是如何从状态 contacts.contact 传递到 contacts.contact.edit 再到组件 editContact 的？我了解状态 contacts.contact 中的解析 contact 在其子状态 contacts.contact.edit 中直接可用，但我找不到任何知识- 与 contacts.states.js 的子句“bindings: { pristineContact: "contact" }' (line57) 相关的基本文档。我猜它会将解析传递给它的组件，因此它的组件可以使用“绑定{...}”来输入它。

2. 我没有在组件 editContact 的模板中看到它被使用/引用，但是 $ctrl.contact 被使用/引用了。 -- 我不明白为什么会有“pristineContact”这个名字。

Answer 1

在示例应用程序中，editContact 组件使用脏检查来确定联系人是否已被编辑。脏检查用于提示用户在切换到其他 URL 时是否要放弃更改。

1) 如何通过contact解析？

正如您所说，contact 解析在嵌套状态下可用。但是，editContact 组件没有contact 绑定。相反，它有一个pristineComponent 绑定。

为了将contact 解析映射到pristineContact 组件绑定，将bindings 映射添加到状态。

      bindings: { pristineContact: "contact" },

这为pristineContact 组件绑定来自contact 解析的数据。

本指南描述了解析绑定： https://ui-router.github.io/guide/ng1/route-to-component#resolve-bindings

... 这个 API 文档有更多血淋淋的细节： https://ui-router.github.io/ng1/docs/latest/interfaces/ng1.ng1viewdeclaration.html#bindings

2) $ctrl.contact 是什么，pristineContact 在模板中的什么位置？

editContact 组件的脏检查会在$onInit() 中创建原始（原始）联系人的副本。表单中的任何更改都将应用于副本 ($ctrl.contact)：

  $onInit() {
    // Make an editable copy of the pristineContact
    this.contact = angular.copy(this.pristineContact);
  }

当用户点击保存时，可编辑副本被保存，然后父状态被激活，reload: true重新加载改变的数据。

  /** Save the contact, then go to the grandparent state ('contacts') */
  save(contact) {
    this.Contacts.save(contact)
        .then(() => this.canExit = true)
        .then(() => this.$state.go("^", null, { reload: true }));
  }

pristineContact 仅用于制作初始副本，然后执行脏检查：

  uiCanExit() {
    if (this.canExit || angular.equals(this.contact, this.pristineContact)) {
      return true;
    }

    let message = 'You have unsaved changes to this contact.';
    let question = 'Navigate away and lose changes?';
    return this.DialogService.confirm(message, question);
  }