Having numerous repetitions of identical modals in Ionic 2/3

My app.component contains a background mode service that shares data via intent to a behavior Subject.

this._notification.setNotiService2(data.extras);

After logging in, the root is set to TabsPage.

this.appCtrl.getRootNav().setRoot('TabsPage');

On the Tabs Page, I subscribe to the behavior subject. This allows me to process shared objects and display their values in a Modal. Everything works fine initially when the app is opened. However, issues arise when logging in or out. Upon logging out, the root page is set to LoginPage.

this.appCtrl.getRootNav().setRoot('LoginPage');

Upon successful login, the root is set back to TabsPage.

 this.appCtrl.getRootNav().setRoot('TabsPage');

If I share values multiple times via intent, multiple instances of the Modal open with the same values. Even though I have checked for null/undefined behavior subjects, the subscribed value seems to be correct. When logging the value from the behavior Subject inside the TabsPage, I noticed that the same function (subscribed behavior subject) is being called twice.

After logging out and in again, the Modal opens three times, and this number continues to increase with each logout/login cycle.

javascriptangulartypescriptionic2hybrid

Answer №1

It appears that you may be forgetting to unsubscribe properly, causing the subscriptions to accumulate with each visit. Remember to always unsubscribe from your subscriptions before leaving a page. In Ionic, the ionViewWillLeave hook is the perfect place to handle this. Make sure to create a new Subscription on your page and...

import { Subscription } from 'rxjs/Subscription';

// ...

mySubscription = new Subscription();

// ...

this.mySubscription = this.myService.mySubject.subscribe(....)

// ...  

ionViewWillLeave() { 
  this.mySubscription.unsubscribe();
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way for me to extract and showcase the initial 10 items bearing a particular class name from a different html document on my homepage?

I am looking to extract a list of movies from an HTML file titled "movies.html". The structure of the file is as follows: <div class="movie">Content 1</div> <div class="movie">Content 2</div> <div class=" ...

javascripthtml

Only certain fields are returned by JQuery's form serialize() method

Encountering an issue with the serialize() function in jQuery when attempting to submit a serialized form via AJAX. Some of the field values are not being retained. Suspecting a problem with either my HTML structure or jQuery code: <div id="register" ...

javascriptjqueryajaxformsserialization

Tips on transferring information to the graphical user interface

Here is my code snippet: signup.post('/signup', urlendcodedParser, async(req: Request, res: Response) => { const username = req.body.username; const password = req.body.password; const age = req.body.age; const email = req ...

node.jsreactjstypescript

Having trouble altering font-family, font-size, and font-weight with JavaScript?

Looking for a way to dynamically change textareas based on selections made in dropdown menus? Check out this JavaScript code snippet: http://jsfiddle.net/73udajhm/ The following is the JavaScript used: $(function () { $("#fontsize").on('change&a ...

javascriptjqueryhtmlcss

Determine the position of an element in relation to a specific ancestor using JavaScript

Let's consider the following example of HTML code: <div id="site_header_container" class="site_bar_container"> <div id="site_header"> <div id="header_logo_container"> <a class="sliced" id="header_ ...

javascripthtmlcss

Can this be considered a sophisticated resolution?

Solving this issue is actually quite simple. Choose a name randomly from an array of names. Here is my approach: var names = [ 'nick', 'rock', 'danieel' ]; function randPicker(names) { var randNum = Math.floor((Math.rand ...

javascriptarraysrandom

Tips for customizing the color of mat-select placeholder text?

I've been attempting to modify the color of a mat-select placeholder. It functions properly when using 'background-color' but not when using 'color'. Below is my CSS code: /deep/ .mat-select-placeholder { color: red; } .mat-s ...

cssangularangular-material-5

Would you like to learn how to display the value of a different component in this specific Angular 2 code and beyond

Hey there, I need your expertise to review this code and help me locate the issue causing variable "itemCount" to not display any value in about.component.html while everything works fine in home.component.html. I am attempting to only show "itemCount" in ...

javascriptangulartypescript

The Angular custom modal service is malfunctioning as the component is not getting the necessary updates

As I develop a service in Angular to display components inside a modal, I have encountered an issue. After injecting the component content into the modal and adding it to the page's HTML, the functionality within the component seems to be affected. F ...

javascriptangulartypescript

Sending data from a PHP function to an AJAX call in the form of an associative array using json_encode() does not

Greetings, this is my first post so please forgive me if I miss anything or fail to explain clearly. All the code below is within the same PHP file. Here is my AJAX call: $.ajax( { type: "POST", url: window.location.href, data: {func: 'g ...

javascriptphpjqueryajax

What is the method to incorporate @angular/fire into an Nx Workspace for an Angular project?

Incorporating @angular/fire into my Nx workspace for my Angular application is my current goal. Despite my efforts to adhere to best practices, I have not found any guidance in the official documentation on how to incorporate this library into the wor ...

angularfirebaseangularfire2nrwl-nxnrwl

Error message "Module not found in Vue" occurs when changing image URL to an online image

I am currently working on a dynamic image display feature where I retrieve image names as strings from a backend. To manage a large number of images, I plan to store them online while maintaining the same logic for displaying them. Previously, I achieved t ...

javascripthtmlvue.js

Is the JavaScript file not being stored in the cache?

As I work on optimizing my web application, I am facing a challenge with a javascript file size of approximately 450K even after compressing it. While I intend to redo the javascripting in due time, for now, I need to go live with what I have. Initially, I ...

phpjavascriptcaching

How can Bootstrap-Vue showcase an SVG image as a navigation item?

I need help positioning the Octocat image on the top right corner of a NavBar: In the Vue Snippet below, the icon is currently only visible if there is text inside the <b-nav-item>: <template> <div> <b-navbar toggleable="lg ...

javascriptvue.jsbootstrap-4vue-componentbootstrap-vue

Chrome renders the javascript source file in a jumbled and unreadable format

I'm new to a project and I've noticed that the javascript files I edit in my IDE appear differently in Chrome. For instance, here is a code snippet from Intellij: https://i.sstatic.net/1ygfg.png Even though this code is in a file named MNV.js, ...

javascriptgoogle-chromegoogle-chrome-devtools

Looking to customize scrolling behavior when navigating back in Next.js?

I have a function in my index.js file that fetches a list of posts like this: const Index = (props) => { return ( <div> {props.posts.map((each) => { return ( <Link scroll={false} as ...

javascriptreactjsnext.js

I am attempting to create a presentation featuring the identical title

How can I enhance this code by turning it into a slideshow with additional images while maintaining the h1 and h2 tags within it? Here's the existing code displaying an image with titles overlayed on top: <header class="header-image"> <d ...

javascriptjqueryhtmlcss

Error encountered during login with Facebook on Cordova: "Unable to create module facebookApp because of..."

As a novice programmer, I am attempting to incorporate Facebook login using Cordova. Following a recent guide provided here, I have meticulously copied and pasted the code into a new Cordova project. While I am familiar with jQuery, this is my first encoun ...

javascripthtmlangularjscordova

Tips for personalizing the Material UI autocomplete drop-down menu

I'm currently working with Material UI v5 beta1 and I've been attempting to customize the Autocomplete component. My goal is to change the Typography color on the options from black to white when an item is selected. However, I'm struggling ...

javascriptreactjstypescriptautocompletematerial-ui

Tips on positioning a button "above" the carousel-control-next icon

I have a carousel and I added a button to stop the spinning. However, when I try to click on the button, it seems like the "carousel-control-next" tag is being clicked instead. How can I solve this issue? ** Interestingly, when I remove the "carousel-cont ...

javascripthtmljquerytwitter-bootstrapbootstrap-4