In Angular 10: can I refresh data from Resolver of parent route?

Question

I have a parent route which uses a Resolver to get data. I have several children of this route. The child Components subscribe to this data in their ngOnInit() methods.

ngOnInit() {
    this.route.parent.data
        .subscribe((data: { collection: DataCollection }) => {
            this.collection = data.collection;
        });
}

The Resolver only runs on the first access of one of the child routes.

This has worked fine because until now changes to the state of collection have not had an impact on the UI, but this is no longer true. (In particular, buttons in the UI on various screens need to get enabled/disabled based on the state of collection.)

So the problem is that since the child routes/components have collection set from the Resolver which only fires once, they do not see updates to it, and cannot update their UIs accordingly.

I've seen a number of posts asking about a similar problem to this, but not one involving a Resolver.

Is there a way to force a re-run of the Resolver without navigating away from and then back to a route? Or is the solution to abandon the Resolver approach, use a service to the get data, and handle updates to it state with RXJS or something?

Thank you

wunderlampetv wunderlampetv · Accepted Answer · 2021-02-02T12:40:51

did you try adding your Components as @ViewChild and implement something like a refresh function inside Components?

@ViewChild(Component1) comp1: Component1;
@ViewChild(Component2) comp2: Component2;

or

@ViewChildren(Component1) comps: QueryList<Component1>;

comp1.refresh();

refresh(state): void {
// this.data = state;
// this.data = initData();
}

In Angular 10: can I refresh data from Resolver of parent route?

1 Answers