如何防止$ state刷新不依赖于$ state.var的任何组件? [英] How to prevent $state from refreshing any Component that does not rely on the $state.var being changed?

问题描述

我们正在使用 Angular-ui-router >用于我们的应用状态管理.

We're using Angular-ui-router for our app state management.

我们遇到的一个问题是，当$state更改时，每个组件都会刷新，即使它是一个已更新的变量，在某些组件中不存在/未使用.

A problem we're having is that every component refreshes when the $state changes, even if it's a variable that is updated that does not exist/not used in some components.

例如，我们有一个TickersPanel和一个TagsPanel.当选择一个代码，所述TagsPanel应该更新和刷新，但是当在TagsPanel被选择的标记，所述TickersPanel不应刷新，但它确实目前

For example, we have a TickersPanel and a TagsPanel. When a Ticker is selected, the TagsPanel should be updated and refreshed, however when a tag is selected in the TagsPanel, the TickersPanel should NOT refresh, but it currently does.

我发现{ notify: false }是可以传递的另一个对象.但是，一旦执行此操作，就不会刷新任何组件.

I found out that { notify: false } is another object that can be passed in. However once I do that, NO components will refresh.

const save = (tag, terms) => {
    CONTAINER.push(tag);
    $state.go('charting', Term.write(terms), { notify: false }).then((stateResult) => {
        console.log('stateResult', stateResult);
    });
};

有人找到解决这个问题的方法吗?

---

TagsPanel $ onInit(在每个$ state更改时运行)

Has anyone found a way around this problem?

---

TagsPanel $onInit (Runs on every $state change)

this.$onInit = () => {
    tagsCol.addEventListener('scroll', scrollingTags);

    this.tags = [];
    this.limit = 30;

    const panelOpen = Dashboard.panelStatus(this.tagsOpen, this.chartMax);
    panelOpen ? buildTagList() : collapsePanel();
};

TickersPanel $ onInit(在每个$ state更改时运行，如果$state.params.ticker没有更改，则不应运行)

TickersPanel $onInit (Runs on every $state change, if $state.params.ticker did not change, then this should not be ran)

this.$onInit = () => {
    this.tickers = [];

    this.spy = {
        longname: "SPDR S&P 500",
        ticker: "SPY",
    };

    this.showTickersPanel = Dashboard.panelStatus(this.tagsOpen, this.chartMax);
    // const currentState = $state.params;
    // const prevState = Dashboard.getPreviousState();
    loadTickers().then(() => this.loadingTickersDone = true);
};

推荐答案

我已经制作了一个JsFiddle 描述一种使用uiRouter实现我从您的问题中了解的方法.

I've made a JsFiddle to describe a way to achieve what I've understood from your question using the uiRouter.

提琴使用状态继承和命名视图仅重新初始化当tickers参数更改时，tags状态.

The fiddle uses state inheritance and named views to only reinitialize the tags state when the tickers param changes.

[..]
// Using @ on the view names to refer to the absolute uiViews.
$stateProvider.state('tickers', {
    url: "",
    views: {
      'tickersPanel@': {
        template: [..]
        bindToController: true,
        controllerAs: "$ctrl",
        controller: function() {
          this.$onInit = function() {
            console.info('Tickers Panel $onInit');
            this.tickers = ["Ticker1", "Ticker2", "Ticker3"]
          }
        }
      },
      [..]
    }
});
$stateProvider.state('tags', {
    parent: 'tickers',
    url: "/:ticker",
    views: {
      'tagsPanel@': {
        template: [..]
        controllerAs: '$ctrl',
        bindToController: true,
        controller: function($stateParams) {
          this.$onInit = function() {
            console.info('Tags Panel 2 $onInit');
            this.ticker = $stateParams["ticker"];
          }
        }
      }
    }
});
[..]

这篇关于如何防止$ state刷新不依赖于$ state.var的任何组件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！