QueryParams in a RouteLink Component Doesn't Work

Question

When I pass a [queryParams] inside a routerlink the link simply doesn't work:

<app-notifications *ngIf="pendingBillets" [routerLink]="'/app/billing/billets-management/billet'" // this simply won't work
                    [queryParams]="{filter: 'pendingBank'}"
                    [isError]="true">
                        Você possui {{pendingBillets}} boleto(s) não cancelado(s) no banco.
</app-notifications>
<app-notifications  [routerLink]="'/app/operational/wash-engine-turn'" // this one is working
                    [queryParams]="{filter: 'never'}">
                        Existem embarcações ativas que nunca tiveram lavação ou giro de motor.
    </app-notifications>

If I remove [queryParams]="{filter: 'pendingBank'}" from the app-notifications, it works just fine.

app-notifications.component.ts:

@Component({
  selector: 'app-notifications',
  templateUrl: './notifications.component.html',
  styleUrls: ['./notifications.component.scss']
})
export class NotificationsComponent implements OnInit {

  @Input() isError = false;
  @Input() routerLink;

  styleClass;

  constructor() { }

  ngOnInit(): void {
    this.styleClass = this.isError ? ['error'] : ['warn'];
    if (this.routerLink === undefined) {
      this.styleClass.push('not-clickable');
    }
  }

billets-management/billet component:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-billet',
  templateUrl: './billet.component.html',
  styleUrls: ['./billet.component.scss']
})
export class BilletComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

Answer 1

I'm not sure this solves your problem, but the routerlink should end on /

Something like:

<app-notifications *ngIf="pendingBillets" [routerLink]="'/app/billing/billets-management/billet/'" // this simply won't work
                    [queryParams]="{filter: 'pendingBank'}"
                    [isError]="true">
                        Você possui {{pendingBillets}} boleto(s) não cancelado(s) no banco.
</app-notifications>
<app-notifications  [routerLink]="'/app/operational/wash-engine-turn/'" // this one is working
                    [queryParams]="{filter: 'never'}">
                        Existem embarcações ativas que nunca tiveram lavação ou giro de motor.
</app-notifications>

See this answer for more detail on queryparams with routerlink.