如何防止$ state刷新任何不依赖于更改$ state.var的Component？

Question

我们正在使用 Angular-ui-router 进行应用状态管理。

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

例如，我们有一个TickersPanel和一个TagsPanel。选择Ticker时，应更新并刷新TagsPanel，但是当在TagsPanel中选择标签时，TickersPanel不应该刷新，但它当前会刷新。

我发现{ notify: false }是另一个可以传入的对象。但是一旦我这样做，就不会刷新任何组件。

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

有没有人找到解决此问题的方法？

TagsPanel $ onInit（每次$状态更改运行）

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.params.ticker没有更改，则不应该运行）

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);
};

Answer 1

我made a JsFiddle描述了一种使用uiRouter实现我在您的问题中所理解的方法。

小提琴使用state inheritance和named views仅在tags参数更改时重新初始化tickers状态。

[..]
// 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"];
          }
        }
      }
    }
});
[..]

Answer 2

为什么不保持组件中的状态，如果状态没有改变，则在函数的开头返回？