如何防止 $state 刷新任何不依赖 $state.var 被更改的组件?

2022-01-21 00:00:00 state angularjs javascript angular-ui-router

我们正在使用 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.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.

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 更改时运行)

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.

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

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

相关文章