Different routes, same component - why component not reload on route change?

Question

I have 2 components, a parent and a child. The same parent component should load on 2 different routes, let's say route1 and route2. The parent component checks which route was used and sets a boolean regarding (isRoute1). The child component gets this boolean as an Input and render HTML regarding. See the skeleton code below.

Let's say first I open route1 in the browser. I could see 'Parent init' and 'Child init' texts in the console and the child component renders 'ROUTE1'. Everything is working as expected. Next, I navigate to route2 in the browser (directly from route1) and I have got some unexpected results. In the console, nothing shows up (so the OnInits didn't trigger) however the child rendered 'ROUTE2'. Why Angular didn't trigger the OnInit() function? How could I achieve that? I thought on route change the parent component will reload so the child.

// Parent component's TS
isRoute1: boolean;
ngOnInit(): void {
console.log('Parent init')
this.router$.pipe(debounceTime(1), untilDestroyed(this)).subscribe(route => {
  this.isRoute1 = route.params.id === 'route1';
});}

// Parent component's HTML
<child-component [isRoute1]="isRoute1"></child-component>


// Child component's TS
@Input()
isRoute1: boolean;

ngOnInit(): void {
  console.log('Child init')
}

// Child component's HTML
<div *ngIf="isRoute1; else route2"> ROUTE1 </div>
<div #route2> ROUTE2 </div>

Observe the changes in variable to reload the OnInit of component. Though i didn't try this, it might be helpful to you. medium.com/angular-in-depth/… — Hari Bharathi
– Hari Bharathi, Commented May 4, 2020 at 16:35
@David This is a huge and complex app and I am only a junior dev so I am not exactly sure how the routing works in this case. There is an object where the route params are the keys and the values are the component that should load. My 2 route and the component is listed here. This object is imported in the app module as a provider and later injected via InjectionToken in some kind of main architect component. :/ I am not sure that could be a clue. — Hordon
– Hordon, Commented May 4, 2020 at 17:35
Can you show that object? The parts where the parent component is included. — David
– David, Commented May 5, 2020 at 7:12
It lookis like this: export const PAGE_ARCHITECT_COMPONENTS: ArchitectComponentsMap = { PARAM1: MyComponent, PARAM2: MyComponent, ...} — Hordon
– Hordon, Commented May 5, 2020 at 8:54

Kari F. · Accepted Answer · 2020-05-04 18:05:03Z

In your ngOnInit() you can subscribe to the paramMap Observable to detect changes of the parameters in the same route:

export class HelloComponent implements OnInit {
  id: any;

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.route.paramMap.subscribe(params => {
      this.id = params.get('id');
      // Do more processing here if needed
    });
  }
}

Check this demo: https://stackblitz.com/edit/angular-vgz4yc

As you can see, the ngOnitInit is executed only once but you can watch on the changes of the route parameters.

To answer your question: The component won't reload if the route doesn't change (parameter change is not enough). But that doesn't matter because you can subscribe to paramMap and, when it emits a new value, do what ever processing you want.

Collectives™ on Stack Overflow

Different routes, same component - why component not reload on route change?

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related