0

Ao executar a rota home/person/create carrega o componente person e não o create.

Tenho pouca experiência com rotas no Angular, se alguém tiver alguma sugestão. Grato!

A rota home/person está ok:

inserir a descrição da imagem aqui

Já a rota home/person/create carrega o componente de lista ao invés de carregar o componente create:

inserir a descrição da imagem aqui

Segue a estrutura abaixo:

inserir a descrição da imagem aqui

person.routing.module

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { PersonListComponent } from './person-list/person-list.component';
import { PersonCreateComponent } from './person-create/person-create.component';

const personRoutes: Routes = [
  {
    path: '',
    component: PersonListComponent,
    children: [
      {
        path: 'create',
        component: PersonCreateComponent,
        data: {
          title: 'Novo'
        }
      }
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(personRoutes)],
  exports: [RouterModule]
})
export class PersonRoutingModule { }

modules.routing.module

import { Routes, RouterModule } from '@angular/router';
import { NgModule } from '@angular/core';

const modulesRoutes: Routes = [
  {
    path: '',
    children: [
      {
        path: '',
        redirectTo: 'person',
        pathMatch: 'full'
      },
      {
        path: 'person',
        loadChildren: () => import('./person/person.module').then(m => m.PersonModule),
        data: {
          title: 'Pessoa'
        }
      }
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(modulesRoutes)],
  exports: [RouterModule]
})
export class ModulesRoutingModule {}

app.routing

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { DefaultLayoutComponent } from './core/containers';
import { P404Component } from './views/error/404.component';
import { P500Component } from './views/error/500.component';
import { LoginComponent } from './core/authorization/login/login.component';
import { RegisterComponent } from './views/register/register.component';
import { PageBaseComponent } from './core/containers/page-base/page-base.component';
import { AuthGuard } from './core/guards/auth.guard';

export const routes: Routes = [
  {
    path: '',
    redirectTo: 'dashboard',
    pathMatch: 'full'
  },
  {
    path: 'login',
    component: LoginComponent,
    data: {
      title: 'Login Page'
    }
  },
  {
    path: 'register',
    component: RegisterComponent,
    data: {
      title: 'Register Page'
    }
  },
  {
    path: '',
    component: DefaultLayoutComponent,
    data: {
      title: 'Home'
    },
    canActivate: [AuthGuard],
    children: [
       {
         path: 'home',
         loadChildren: () => import('./modules/modules.module').then(m => m.ModulesModule),
      }
    ]
  }
];

@NgModule({
  imports: [ RouterModule.forRoot(routes, { relativeLinkResolution: 'legacy' 
}) ],
  exports: [ RouterModule ]
})
export class AppRoutingModule {}

1 Resposta 1

0
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { PersonListComponent } from './person-list/person-list.component';
import { PersonCreateComponent } from './person-create/person-create.component';

const personRoutes: Routes = [
  {
    path: '',
    component: PersonContainerComponent, --> criar um person container com um <router-outler></router-outlet>
    children: [
      {
        path: '',
        component: PersonListComponent ,
        data: {
          title: ''
        }
      },

      {
        path: 'create',
        component: PersonCreateComponent,
        data: {
          title: 'Novo'
        }
      }
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(personRoutes)],
  exports: [RouterModule]
})
export class PersonRoutingModule { }
1
  • Perfeito Eduardo. Muito obrigado!
    – Luiz
    Commented 22/03/2021 às 20:53

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .