I’m using Ionic 4 and have a page that will show the user data, as name, address and etc… I’m trying to access this page clicking on an avatar that is on my header component
(Custom component)
-
It works in the First click, right after the app starts, but if I go back to the home route and Try to access the page again, the router link poits to other page that is the tabs page.
-
If I try to acess this link on the header from other routes inside the tab, he throws me the error that
cannot match any routes
Considerations: I’m using 3 routes module, app-routing.module
(Here I have an CanActivate method…), private-routing.module
and tabs-routes.module
Here’s the files
app-routing.module:
import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
import { GuardaautenticacaoService } from './services/guardaautenticacao.service';
const routes: Routes = [
{ path: '', redirectTo: 'login', pathMatch: 'full' },
{ path: 'login', loadChildren: './public/login/login.module#LoginPageModule' },
{
path: 'private',
canActivate: [GuardaautenticacaoService],
loadChildren: './private/private-routing.module#PrivateRoutingModule'
}
];
@NgModule({
imports: [
RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
],
exports: [RouterModule]
})
export class AppRoutingModule { }
private-routing.module:
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
const routes: Routes = [
{ path: 'tabs', loadChildren: './tabs/tabs.module#TabsPageModule' }
];
console.log(routes)
@NgModule({
imports: [
RouterModule.forChild(routes)
],
exports: [RouterModule]
})
export class PrivateRoutingModule { }
tabs-router.module
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { TabsPage } from './tabs.page';
const routes: Routes = [
{
path: '',
component: TabsPage,
children: [
{
path: '',
children: [
{
path: '',
loadChildren: '../home/home.module#HomePageModule'
}
]
},
{
path: 'home',
children: [
{
path: '',
loadChildren: '../home/home.module#HomePageModule'
}
]
},
{
path: 'tarefas',
children: [
{
path: '',
loadChildren: '../tarefas/tarefas.module#TarefasPageModule'
}
]
},
{
path: 'cadastros',
children: [
{
path: '',
loadChildren: '../cadastros/cadastros.module#CadastrosPageModule'
}
]
},
{
path: 'relatorios',
children: [
{
path: '',
loadChildren: '../relatorios/relatorios.module#RelatoriosPageModule'
}
]
},
{
path: 'usuario-detalhe',
children: [
{
path: '',
loadChildren: '../sharedmodule/usuario-detalhe/usuario-detalhe.module#UsuarioDetalhePageModule'
}
]
},
]
},
{
path: '',
redirectTo: './private/tabs/home',
pathMatch: 'full'
}
];
@NgModule({
imports: [
RouterModule.forChild(routes)
],
exports: [RouterModule]
})
export class TabsPageRoutingModule { }
Header component that has the trigger o change the route to usuario-detalhe
, this is a custom component…
<ion-header>
<ion-toolbar>
<ion-item lines="none" *ngIf="usuario !=null">
<a [routerLink]="['usuario-detalhe']">
<ion-avatar slot="start">
<img src="https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/3e/3eb6c8bae0aa5dbb209912a4b2d0bd3c535134be.jpg">
</ion-avatar>
</a>
<ion-label>
<h3>{{usuario.nome_usuario}}</h3>
<ion-text class="grey"><small color>{{usuario.nome_cargo}}</small></ion-text>
</ion-label>
<a>
<ion-button (click)="logout()" fill="clear">
<ion-icon name="log-out"></ion-icon>
</ion-button>
</a>
</ion-item>
</ion-toolbar>
</ion-header>
I think this gif can help to understand
How Could I Solve that?