I’m using side menu and super tabs which include 3 pages, when click details button on home page it will go to the super tabs, now each page on super tabs has own API, there is set timer will fetch data every 30 second, Problem is when go back root home, the pages on the tab still connect to the API which mean function still working, i want to clear or destroy pages for each pageson the tab when press home page or when press another page on the tab?!
Your unsubscriptions, clearInterval and others have to be managed at root’s root level.
It could be a scenario :
Write inside 2 separated functions the 2 different states (active interval or not) and set ID interval as attribute of app-root component (or homepage)
Subscribe to a service/provider who listen your state “stop all intervals - OR - start all intevals”, it can be triggered at any level inside your app by calling yourState.next(newValueState) of this service/provider.
State can be 1 or 0 ie. start Interval or stop interval
private _state = new BehaviorSubject<number>(1);
public state = this._state.asObservable();
stopMyApiPullRequestInterval(){
this.state.next(0)
}
startMyApiPullRequestInterval(){
this.state.next(1)
}
Any page, servicer or component file in the app
import { MyServiceProvider } from '../where-the-file-is/where-the-file-is'
constructor(private myServiceProvider: MyServiceProvider){}
// Local method can be called by click on button inside tamplate
activateApiPullRequest(){
this.myServiceProvider.startMyApiPullRequestInterval()
}
deactivateApiPullRequest(){
this.myServiceProvider.stopMyApiPullRequestInterval()
}
With this pattern, the subscription of pull request api is stateless in regard of lifecycle (destruction/ionViewWillUnload/didUnload/ngOnDestroy) of your tabs component
All right, this code works for me too, but when i have click to someone non active tab, shows the active page before reload main page. How can this issue be solved?