只有重裝做出決議無需重新加載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

回答

相關問題