Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
bouro opened this issue Feb 6, 2020 · 2 comments
Open
Labels
bug Something isn't working

Comments

@bouro
Copy link

bouro commented Feb 6, 2020

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
Copy link
Owner

gilsdav commented Feb 13, 2020

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

@bouro
Copy link
Author

bouro commented Feb 13, 2020

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>

@gilsdav gilsdav changed the title The value of routerLink does not change in the AppComponent The value of routerLink does not change in the AppComponent (Ionic) Sep 1, 2020
@gilsdav gilsdav added the bug Something isn't working label Dec 6, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants