2

Tenho este arquivo que monta o 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;
  }
}

A rota principal:

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' 
}];

A rota para endereço:

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
      }
    ]
  }
];

Após clicar no menu, monta a rota correta http://localhost:4200/#/endereco/pais, mas se digitar http://localhost:4200/#/pais, mostra errada e desconfigurada. Conforme imagens:

correta inserir a descrição da imagem aqui

errada inserir a descrição da imagem aqui

Como fazer para deixar somente a correta e caso digitar a errada, mostra erro 404 ?

7
  • Tem alguma forma que o usuário possa entrar na rota errada de forma que não seja alteração na barra de endereço?
    – mutlei
    Commented 8/05/2018 às 16:49
  • Sim, no caso é só se ele digitar, o que pode acontecer. Isto que estou querendo barrar.
    – Guilherme
    Commented 8/05/2018 às 16:57
  • Acredito que colocando o objeto dessa forma: { 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: '**', redirectTo: 'not-found' }, { path: 'not-found' , component: NotFoundComponent } Commented 8/05/2018 às 18:20
  • O objeto da rota principal, no caso. Coloca dessa forma... Commented 8/05/2018 às 18:20
  • Continua a mesma. caso eu digite o errado localhost:4200/#/pais,
    – Guilherme
    Commented 8/05/2018 às 19:48

1 Resposta 1

0

Você pode ter um path ** no final das suas rotas que usa um not found component ou algo assim.

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

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 .