refresh list displayed in child component

hello everyone I have home component and its child list component from home component when clicking menu icon i can choose an item and based on this choice I get rendered to home/list and then I get a displayed list based on the choice but in my case its displayed correctly only in the first time but if i change the choice i still have the same list displayed here is some screenshots to help you understand.. here I have already chosen "migration" from menu and the list is displayed correctly

and here its the list displayed from an api call

and this describes my problem after choosing the list diplayed without refreshing the data to display

export class ListPage implements OnInit {
  filter: string;
  toolbarTitle: string;
  toolbarColor: string;
  itemIcon: string;
  ots: OtModel[]
  listOtDispl: OtModel[] = [];
  currentUser: Utilisateur
  constructor(private route: ActivatedRoute, private otService: OtService, private utilisateurService: UtilisateurService) {
    this.route.queryParams.subscribe(params => {
      this.filter = params["myParameter"]
    });
    this.utilisateurService.currentUser.subscribe(x => this.currentUser = x);
  }
  ngOnInit() {
    this.getListOt()
  }
  getListOt() {
    this.otService.getAllOt().pipe(map(
      ((listOt: OtModel[]) => listOt.filter(
        (ot: OtModel) => ot.typeOt === this.filter
      ))
    )).
    subscribe(
      (listOt: OtModel[]) => {
        this.ots = listOt
        console.log(this.ots)
      })
  }

HomePage.ts

export class HomePage {
  currentUser: Utilisateur
  typesOt: TypeOtModel[];
  constructor(
    private router: Router,
    private route: ActivatedRoute,
    private translateService: TranslateService,
    private utilisateurService: UtilisateurService,
    private otService: OtService) {
    this.utilisateurService.currentUser.subscribe(x => this.currentUser = x);
  }
  ngOnInit() {
    this.getTypeOts()
    console.log(this.typesOt)
  }
  Goto(menu: OtModel) {
    const navigationExtras: NavigationExtras = {
      queryParams: {
        myParameter: menu.typeOt,
      }
    };
    if (menu.typeOt == 'RLA Reservation') {
      this.router.navigate(["home/rla"], navigationExtras);
    } else
      this.router.navigate(["home/list"], navigationExtras);
    console.log(navigationExtras.queryParams.myParameter)
  }
  getTypeOts() {
    this.otService.getTypeOt().subscribe(data => {
      this.typesOt = data as TypeOtModel[]
    })
    console.log(this.typesOt)
  }
}

listpage.html

<ion-header>
</ion-header>
<ion-content>
   <ion-list>
      <ion-item  button *ngFor="let item of ots  ">
         <!-- <ion-icon name="{{itemIcon}}" slot="end" class ="customIcon" color="{{toolbarColor}}" ></ion-icon> -->
         <ion-label>
            <h2>{{item.idDem}}</h2>
            <!-- <p>{{item.description}}</p> -->
         </ion-label>
      </ion-item>
   </ion-list>
</ion-content>

Solution

Try this

this.route.queryParams.subscribe(params => { 
    this.filter =params["myParameter"] 
    this.getListOt();
});

ionViewWillEnter(){
     this.getListOt();
}