The value of routerLink does not change in the AppComponent (Ionic)

[bouro]

Hello,

Thank you for your library and the work you do.

I use ionic with angular, I noticed that in the side menu which is loaded in the app.component.html does not change the value of the routerLink.

<ion-app>
   <ion-split-pane contentId="main-content">
      <ion-menu contentId="main-content" type="overlay">
         <ion-header>
            <ion-toolbar>
               <ion-title>Menu</ion-title>
            </ion-toolbar>
         </ion-header>
         <ion-content>
            <ion-list lines="none">

               <ion-menu-toggle auto-hide="false" *ngFor="let page of appPages">
                  <ion-item [routerLinkActive]="'active'"
                  [routerLink]="page.url | localize" <!--the value does not change-->
                  [routerDirection]="'root'">
                  <ion-icon slot="start" [name]="page.icon"></ion-icon>
                  <ion-label>
                     {{page.title | translate}} <!--returns the right value-->
                     {{page.url | localize}} <!--returns the right value-->
                  </ion-label>
                  </ion-item>
               </ion-menu-toggle>

            </ion-list>
         </ion-content>
      </ion-menu>
      <ion-router-outlet id="main-content"></ion-router-outlet>
   </ion-split-pane>
</ion-app>

[gilsdav]

Thank's for this interesting issue, I will check this soon.
Did you find a workaround?

[bouro]

Just a workaround at the moment.
I created a PagesService

@Injectable({
    providedIn: 'root',
})
export class PagesService {
    private defaultPages: Page[] = [
        {title: 'nav.home', url: '/', icon: 'home-sharp'},
        {title: 'nav.categories', url: '/categories', icon: 'apps-sharp'},
    ];

    private pages$ = new BehaviorSubject<Page[]>(null);

    constructor(private localizeRouterService: LocalizeRouterService) {
        this.localizeRouterService.routerEvents
            .pipe(startWith('Initial call'))
            .subscribe(() => {
                this.build();
            });
    }

    getPages(): Observable<Page[]> {
        return this.pages$;
    }

    private build() {
        const pages: Page[] = JSON.parse(JSON.stringify(this.defaultPages));
        pages.forEach((page) => {
            page.url = this.localizeRouterService.translateRoute(page.url) as string;
        });

        this.pages$.next(pages);
    }
}

And in the AppComponent

@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
    styleUrls: ['app.component.scss'],
})
export class AppComponent {
    pages$: Observable<Page[]>;

    constructor(private pagesService: PagesService) {
        this.pages$ = this.pagesService.getPages();
    }
}

<ion-menu-toggle auto-hide="false" *ngFor="let page of (pages$ | async)">
	<ion-item [routerLinkActive]="'active'"
			  [routerLinkActiveOptions]="{exact: true}"
			  [routerLink]="page.url"
			  [routerDirection]="'root'">
		<ion-icon slot="start" [md]="page.icon"></ion-icon>
		<ion-label>
			{{page.title | translate}}
		</ion-label>
	</ion-item>
</ion-menu-toggle>