title: Different routes, same component - why component not reload on route change?
body: <p>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.</p>
  
  <p>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. </p>
  
  <pre><code>// Parent component's TS
  isRoute1: boolean;
  ngOnInit(): void {
  console.log('Parent init')
  this.router$.pipe(debounceTime(1), untilDestroyed(this)).subscribe(route =&gt; {
    this.isRoute1 = route.params.id === 'route1';
  });}
  
  // Parent component's HTML
  &lt;child-component [isRoute1]="isRoute1"&gt;&lt;/child-component&gt;
  
  
  // Child component's TS
  @Input()
  isRoute1: boolean;
  
  ngOnInit(): void {
    console.log('Child init')
  }
  
  // Child component's HTML
  &lt;div *ngIf="isRoute1; else route2"&gt; ROUTE1 &lt;/div&gt;
  &lt;div #route2&gt; ROUTE2 &lt;/div&gt;
  </code></pre>