のみ 、私はコンポーネントを使用していますが、データは状態の解決からバインドされているので</p> <p>ので、全体のUI /コントローラをリロードせずに自分の状態に解決さをリロードするUIルータを強制するにはどうすればよいのhtml

Question

をリロードせずに解決さをリロード私はリロードする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をリロードせずに更新されました。

Answer 1

あなたがリクエストした内容は、そのままでは使用できません。解決が解決されるのは、状態に入るときだけです。

しかし、データをリフレッシュする方法の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 
      } 
     }) 
    } 
    } 
} 

それは自身でデータを「解決」するので、あなたがいない、もはや親コンポーネントに結合している、とあなたが持っています

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

のように親コンポーネントのテンプレートに挿入すると、 IFのように子コンポーネントに子コンポーネントをバインドできます。

ビューを使用して子をロードする場合は、明らかにこの方法でデータをバインドできません。少しトリックがありますが、ちょっとハッキリです。まず解決策2

、空のオブジェクト解決：からのコード例に続き

bindings: { 
    data: '<' 
} 

：今

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

を、のようなすべてのコンポーネントへの結合を割り当てます上記の$ 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 
    } 
} 

：変更は、リロードする状態を誘発しないので、ダイナミックなどのパラメータを宣言することを忘れないでください