本文介绍了如何防止 $state 刷新任何不依赖于 $state.var 被更改的组件?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我们正在使用 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.当一个 Ticker 被选中时,TickersPanel 应该被更新和刷新,但是当在 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 变化时运行)

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.

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

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 被更改的组件?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-26 01:22