We're using Angular-ui-router for our app state management.
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.
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.
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);
});
};
this.$onInit = () => {
tagsCol.addEventListener('scroll', scrollingTags);
this.tags = [];
this.limit = 30;
const panelOpen = Dashboard.panelStatus(this.tagsOpen, this.chartMax);
panelOpen ? buildTagList() : collapsePanel();
};
$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);
};
I've made a JsFiddle to describe a way to achieve what I've understood from your question using the uiRouter.
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"];
}
}
}
}
});
[..]
为什么不保持组件中的状态,如果状态没有改变,则返回函数的开头?
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.