Angular 2/4. Reuse strategy. How to inform component it's been reused?

Question

We work with NG2/4 stuff. We have implemented a custom reuse strategy to perfrom the navigation from summary to details screens so we have the summary screen stay in same state (prevent it from recreation) when a user clicks back button.

The thing is that when we edit a record in a child screen and we get back to the main one we have to reload the particular data, not all entire master screen. We have to somehow infrom a component that related data has been changed and it has to update.

But in the strategy class there are no methods having access to the component. The are classes but no their instances so it is unclear how to let a component know about the particular change.

public shouldReuseRoute(future: ActivatedRouteSnapshot, current: ActivatedRouteSnapshot): boolean {
    // I guess here we have to treat it somehow if it is possible
}

If i understand it right your problem is communication between components? (child and parent) — Vitor Mateus, Sep 20 '17 at 11:12
Logically they linked as parent and child, but routing wise their are not. They have different paths. — Damask, Sep 20 '17 at 11:16

score 3 · Answer 1 · edited Feb 01 '18 at 14:38

Had the same problem: there is a dozen of components in our application, that are being reused. Luckily all of them are inherited from one abstract class, so this solution was implemented only in one place.

Workaround is pretty ugly, but it covers the need, is very small and easy.

Inject a router into your component.
Subscribe to router events. If your component captures any router event, this probably means that component was left and it must refresh the data once user gets back. So, if you get a router event, put some flag into component
Now all we need is to know, when user came back. We track it by overriding default hook ngDoCheck.
If ngDoCheck callback is being called and your flag is true, set the flag to false and reload the data

constructor(router: Router) {
  super();

  router.events.subscribe(e => {
    if (!this._reloadData) {
      this._reloadData = true;
    }
  });
}

private ngDoCheck() {
  if (this._reloadData) {
    this._reloadData = false;
    this.resetData();
  }
}

score 0 · Answer 2 · answered Oct 27 '17 at 14:57

if you could access parent component properties from detail component, problem might be angular change detection. For details (https://github.com/primefaces/primeng/issues/2606). if you couldnt access to parent component properties from detail component try to use shared service. Hope it will help

score 0 · Answer 3 · answered Oct 08 '20 at 14:19

This is a bit late, but might be useful for future visitors. Put this in the component's ngOnInit that is being reused. It will execute starting on the 2nd entrance on the route, hence the need for the call after the subscription. Additionally you might want to add the unsubscription inside the ngOnDestroy method.

  export class ClassOfThisComponent implements OnInit {
    (...)
    public ngOnInit: void {
      this.router.events.subscribe(ev => {
        if (ev instanceof ActivationEnd &&
          Object.is(ev?.snapshot?.component, ClassOfThisComponent)) {
          initialFetch();
        }
      });

      initialFetch();
    }

    private initialFetch(): void {
      // do stuff here
    }

    (...)
  }

Angular 2/4. Reuse strategy. How to inform component it's been reused?

3 Answers3