Question

Estou obtendo o seguinte erro quando tento abrir umnovoformulário来自[routerLink]：

error_handler.js：54 EXCEPTION：未捕获（在承诺中）：错误：无法匹配任何路由。网址细分：'usuario-cadastrar-dialog' 错误：无法匹配任何路由。网址细分：'usuario-cadastrar-dialog'

PáginaHTML：

<h1>Usuários</h1>

<button type="button" *ngIf="mostrarBotaoNovo"
    [routerLink]="['/', { outlets: { popup: ['usuario-cadastrar-dialog'] } 
}]"
    class="btn btn-default">
   <i class="fa fa-user" aria-hidden="true"></i> Novo usuário
</button>

usuario-routing.ts

import {NgModule} from "@angular/core";
import {RouterModule} from "@angular/router";
import {GerenciarUsuarioComponent} from "./usuario-gerenciar/usuario-gerenciar.component";
import {CadastrarEditarUsuarioDialogComponent} from "./usuario-cadastrar-dialog/usuario-cadastrar-dialog.component";

@NgModule({
  imports: [
    RouterModule.forChild([
      {
        path: 'administracao',
        children: [
          {path: 'usuario', component: GerenciarUsuarioComponent},
          {path: 'usuario-cadastrar-dialog', component: CadastrarEditarUsuarioDialogComponent, outlet: 'popup'}
        ]
      }
    ])
  ],
  exports: [RouterModule]
})
export class UsuarioRouting {
}

APP-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import {PrincipalComponent} from "./principal/principal.component";
import {UsuarioRouting} from "./usuario/usuario-routing";

const routes: Routes = [
  {
    path: '',
    pathMatch: 'full',
    component: PrincipalComponent
  },

  ...UsuarioRouting
];

@NgModule({
  imports: [RouterModule.forRoot(routes, {useHash: true})],
  exports: [RouterModule],
  providers: []
})
export class AppRoutingModule { }

Answer 1

Pelo que eu percebi，o seu usuario-routing.ts tem um path administracao e depois usuario-cadastrar-dialog，e na pagina htmlvcestáchamandoapenas usuario-cadastrar-dialog enãoadministracao/ usuario-cadastrar-dialog。

Tenta mudar disso：

[routerLink]="['/', { outlets: { popup: ['usuario-cadastrar-dialog'] }

pra isso：

[routerLink]="['/', { outlets: { popup: ['administracao/usuario-cadastrar-dialog'] }.

Ou apenas colocar uma rota no seu componente principal，aqui：

const routes: Routes = [
{
path: '',
   pathMatch: 'full',
   component: PrincipalComponent,
 path: 'usuario-cadastrar-dialog',
    pathMatch: 'full',
    component: CadastrarEditarUsuarioDialogComponent
},

（Nãesqueçadoimport do CadastrarEditarUsuarioDialogComponent）。

未捕获（承诺）：错误：无法匹配任何路线。网址细分：

1 个答案: