如何在另一个打开的选项卡中使用组件的更改？

Question

In my project in Angular 5 when user clicks on a link a new tab of project opens then something changes in the new page. Now how can I use these changes for the first tab? I used Subject and Observable and save the variable for the first component. The code goes into the first component but the first tab doesn't change, because all of these happenings are in second tab. I want when I go to the first tab again the changes related to this component done. I don't know how to solve it, please help if you know. Thank you in advanced...

Answer 1

its not applicable to a subject to be fired in one tab and catch it in another tab, so you can simply use the storage change event as follows:

window.addEventListener('storage', storageChanged);

// here listen to the changes
storageChanged(event) {
  // your code
}

in another tab, when something changed, you can add it to the storage, then it will be cached in the first event listener

  localStorage.setItem('crossTabTest',data);

this approach is used when something not related to data fetched from server side, in such case, you probably will use Socket.io to receive the changes.

---------------------- New Edit Section ----------------------

First Component

ngOnInit(): void {
    window.addEventListener('storage', () => {
      const a = JSON.parse(localStorage.getItem('crossTabTest'));
      localStorage.removeItem('crossTabTest');
      console.log('Changed Value = ', a);
    });
  }

Second Component

localStorage.setItem('crossTabTest', JSON.stringify({continue: true}));