Menu and routes and subroutes

Asked

Viewed 204 times

2

I have this file that mounts the menu.

import { Injectable } from '@angular/core';

export interface BadgeItem {
  type: string;
  value: string;
}
export interface Saperator {
  name: string;
  type?: string;
}
export interface ChildrenItems {
  state: string;
  name: string;
  type?: string;
}

export interface Menu {
  state: string;
  name: string;
  type: string;
  icon: string;
  badge?: BadgeItem[];
  saperator?: Saperator[];    
  children?: ChildrenItems[];
}

const MENUITEMS = 
[
  {
    state: 'dashboard',
    name: 'Dashboard',
    type: 'link',
    icon: 'av_timer'
  },
  {
    state: 'endereco',
    name: 'Endereços',
    type: 'sub',
    icon: 'apps',
    children: [
      {state: 'pais', name: 'País'},
      {state: 'estado', name: 'Estado'},
      {state: 'bairro', name: 'Bairro'},
      {state: 'logradouro', name: 'Logradouro'},
      {state: 'tipoLogradouro', name: 'Tipo de logradouro'}
    ]
  }
];

@Injectable()
export class MenuItems {
  getMenuitem(): Menu[] {
    return MENUITEMS;
  }
}

The main route:

import { Routes } from '@angular/router';

import { FullComponent } from './layouts/full/full.component';
import { AppBlankComponent } from './layouts/blank/blank.component';

export const AppRoutes: Routes = [{
  path: '',
  component: FullComponent,
  children: [
  {
    path: 'arquivo',
    loadChildren: './paginas/arquivo/arquivo.module#ArquivoModule'  
  },
  {
    path: 'declaracao',
    loadChildren: './paginas/declaracao/declaracao.module#DeclaracaoModule'  
  },
  {
    path: 'endereco',
    loadChildren: './paginas/endereco/endereco.module#EnderecoModule'  
  }
]
},{
  path: '',
  component: AppBlankComponent,
  children: [{
    path: 'authentication',
    loadChildren: './authentication/authentication.module#AuthenticationModule'
  }]
},{
  path: '**',
  redirectTo: '404' 
}];

The route to address:

import { Routes } from '@angular/router';
import { PaisComponent } from './pais/pais/pais.component';
import { PaisFormComponent } from './pais/pais-form/pais-form.component';
import { EstadoComponent } from './estado/estado/estado.component';
import { EstadoFormComponent } from './estado/estado-form/estado-form.component';
import { BairroComponent } from './bairro/bairro/bairro.component';
import { BairroFormComponent } from './bairro/bairro-form/bairro-form.component';
import { LogradouroComponent } from './logradouro/logradouro/logradouro.component';
import { LogradouroFormComponent } from './logradouro/logradouro-form/logradouro-form.component';
import { TipologradouroComponent } from './tipologradouro/tipologradouro/tipologradouro.component';
import { TipologradouroFormComponent } from './tipologradouro/tipologradouro-form/tipologradouro-form.component';

export const EnderecoRoutes: Routes = [
  {
    path: '',
    children: [
      {
        path: 'pais',
        component: PaisComponent
      },
      {
        path: 'pais/novo',
        component: PaisFormComponent
      },
      {
        path: 'pais/alterar/:id',
        component: PaisFormComponent
      },
      {
        path: 'estado',
        component: EstadoComponent
      },
      {
        path: 'estado/novo',
        component: EstadoFormComponent
      },
      {
        path: 'estado/alterar/:id',
        component: EstadoFormComponent
      },
      {
        path: 'bairro',
        component: BairroComponent
      },
      {
        path: 'bairro/novo',
        component: BairroFormComponent
      },
      {
        path: 'bairro/alterar/:id',
        component: BairroFormComponent
      },
      {
        path: 'logradouro',
        component: LogradouroComponent
      },
      {
        path: 'logradouro/novo',
        component: LogradouroFormComponent
      },
      {
        path: 'logradouro/alterar/:id',
        component: LogradouroFormComponent
      },
      {
        path: 'tipoLogradouro',
        component: TipologradouroComponent
      },
      {
        path: 'tipoLogradouro/novo',
        component: TipologradouroFormComponent
      },
      {
        path: 'tipoLogradouro/alterar/:id',
        component: TipologradouroFormComponent
      }
    ]
  }
];

After clicking on the menu, mount the correct route http://localhost:4200/#/address/parents, but if you type http://localhost:4200/#/parents, wrong and disfigured display. As per images:

correct inserir a descrição da imagem aqui

wrong inserir a descrição da imagem aqui

How to do to leave only the correct and if you type the wrong, shows error 404 ?

angular

  • Is there any way that the user can enter the wrong route so that nay change in the address bar?

  • Yes, in case it’s only if he type, which can happen. This is what I’m hoping to bar.

  • I believe putting the object this way: { path: 'file', loadChildren: './pages/file/file.module#Arquivomodule' }, { path: 'statement', loadChildren: './pages/statement/declaration.module#Declaracaomodule' }, { path: 'address', loadChildren: './pages/address/address.module#Addresstype' }, { path: '**', redirectTo: 'not-found' }, { path: 'not-found' , Component: Notfoundcomponent }

  • The object of the main route, in this case. Put this way...

  • Still the same. in case I type the wrong http://localhost:4200/#/parents,

  • is working the way it was supposed to work. What’s the problem? All the routes you put in the module address will be after /address. If you want to do the route at that level above you have to declare it in app.routing.module

  • I understood that it is working correctly. But how to stop what I don’t want, for example ? ?

Show 2 more comments

1 answer

0

You can have a path ** at the end of your routes that uses a not found Component or something.

  { path: '**', component: PageNotFoundComponent }

Browser other questions tagged angular

You are not signed in. Login or sign up in order to post.