javascript - 未捕获（承诺）：错误：无法匹配任何路由。网址段：

Question

Estou obtendo o seguinte erro quando tento abrir um novo formulário via [routerLink]：

error_handler.js:54 例外：未捕获（承诺）：错误：无法匹配任何路由。URL 段：'usuario-cadastrar-dialog' 错误：无法匹配任何路由。URL 段：'usuario-cadastrar-dialog'

页面 HTML：

<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 {
}

应用程序路由.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 html vc está chamando apenas usuario-cadastrar-dialog e não administracao/usuario-cadastrar-dialog。

Tenta mudar disso:

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

实际情况：

[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ão esqueça do import do CadastrarEditarUsuarioDialogComponent）。