Angular 6 的路由不适用于“Router”模块，我想我有一个错误但我不知道它是啥

Posted 2023-03-13

【中文标题】Angular 6 的路由不适用于“Router”模块，我想我有一个错误但我不知道它是啥

【英文标题】：The routes of Angular 6 do not work with the "Router" module, I think I have an error but I do not know what it isAngular 6 的路由不适用于“Router”模块，我想我有一个错误但我不知道它是什么

【发布时间】：2019-02-26 23:32:18

【问题描述】：

我设置了路线，我有 2 个 Outlets，第一个和第二个称为“Sesion”，但是，我为“Sesion”Outlet 建立了几条路线，它只让我去第一个，即当我按下“Ingresar”按钮（稍后您会看到）它有效地将我带到了既定路线，我更改了组件但是当我尝试使用当前组件中的另一个按钮更改 Outlet 的内容时，它不起作用不再...或返回以可视化先前的组件，而不是转到另一个组件。

这是我的路线（）：

import  NgModule  from '@angular/core';
import  Routes, RouterModule  from '@angular/router';
import  AccionesComponent  from './acciones/acciones.component';
import  SesionComponent  from './sesion/sesion.component';
import  PostulacionComponent  from './postulacion/postulacion.component'
import  VotacionComponent  from './votacion/votacion.component';

const routes: Routes = [
  
    path: "",
    component: AccionesComponent 
  ,
  
    path: "votacion",
    component: VotacionComponent 
  ,
  
    path: "",
    component: SesionComponent,
    outlet: "sesion"
  ,
  
    path: "siguiente",
    component: PostulacionComponent,
    outlet: "sesion"
  ,
  
    path: "votacion",
    component: VotacionComponent,
    outlet: "sesion"
  
];

@NgModule(
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
)
export class AppRoutingModule  

我的 app.HTML（默认组件）

<div class="clearfix col contenedor">  
  <div class="column acciones">
        <router-outlet></router-outlet>
    </div>

    <div class="column sesion"> 
        <router-outlet name="sesion"></router-outlet>
    </div>
</div>

我的 Sesion.component.html： （此按钮适用于“ingresar”）

<div class="content1">
    <div class="content2">

      <div class="row">
        <h1 class="tit"><b>Inicio de Sesión</b></h1>
      </div>
      <div class="row">
        <input class="inputs" type="text" name="nombre" value="Usuario o código de empleado">
        <br>
      </div>
      <div class="row">
        <input class="inputs" type="text" name="pass" value="Contraseña">
        <br><br>
      </div>
      <div class="row">
        <input type="button" value="Ingresar" [routerLink]="[ outlets: sesion: ['siguiente']  ]" routerLinkActive="active">
      </div>
      <div class="row">
        <a class="tit2"><b>¿Olvidáste tu contraseña?</b></a>
      </div>  

    </div>
</div>

我的 acciones.component.html（主要出口的内容）

<div class="tittle">#YoValoroOL</div>
<div class="text"><p>Apoya a tus colegas para que reciban el reconocimiento 
  que se merecen en el marco de los valores que nos definen como empresa.</p>
</div>
<div class= "tittle2">OLSoftware</div>

我的 postulation.component.html () （此按钮不起作用“votar”）

<div class="content1">
    <div class="content2">
        <h1 class="tit"><b>Postulaciones</b></h1>
      <div class="label row">
         Buscar por nombre:
      </div>
          <select class="inputs" name="nombrea">
              <option value="volvo">Vanessa Velez Portera</option>
              <option value="saab">Vanesa Velez</option>
              <option value="fiat">Stiven Duran</option>
              <option value="audi">Camila de la Espriella</option>
          </select>
      <br><br><br><br>
      <div class="label row">
          Buscar por rol:
       </div>
          <select class="inputs" name="passa">
              <option value="volvo">Desarrollador Front-End</option>
              <option value="saab">Vanesa Velez</option>
              <option value="fiat">Stiven Duran</option>
              <option value="audi">Camila de la Espriella</option>
          </select>
      <div class="content3">
        <a [routerLink]="[outlets:sesion: ['votacion']  ]"
         routerLinkActive="active">Votar</a>
      </div>
      <div class="row">
        <input type="button" value="Seleccionar">
      </div>
    </div>
</div>

我的 votacion.component.html: 只是一个默认组件

<p>
  votacion works!
</p>

请帮帮我，我不知道为什么不工作

这是错误：

ERROR 错误：未捕获（在承诺中）：错误：无法匹配任何路由。 URL 段：'siguiente'

https://github.com/marco7247/APPDinam.git这是代码，如果有人可以帮助我的话。

即使我将路线的顺序更改为第一次更改的第一次工作。

【问题讨论】：

如果可能，请添加 StackBlitz 示例。

github.com/marco7247/APPDinam.git

【参考方案1】：

发生错误“...Uncaught (in promise):...”是因为主路由无法处理 'siguiente' 路由。

要修复路由错误，您可以添加一个主要的 catch all 路由：

    path: '**',
    component: AnotherComponent

或一个主要的命名路由：

    path: 'siguiente',
    component: AnotherComponent

通过名称访问辅助路由的方式与主路由不同。 通往二级路由的链接如下所示http://localhost:4200/(sesion:siguiente)。

访问http://localhost:4200/siguiente，你会到达主路由，次路由会被解析为''，这就是为什么你会在次路由出口中得到SesionComponent的内容。

您可能还想访问angular docs 以了解更多信息。

更新

另外，链接需要修复，这是导航辅助路线的正确代码：

<a [routerLink]="[ outlets:  sesion: ['votacion']  ]"
   routerLinkActive="active">Votar</a>

【讨论】：

当前浏览器链接对您来说是怎样的？它应该看起来像这样http://localhost:4200/(sesion:siguiente)

该链接有效，但问题从这一行开始：我的 postulation.component.html () ---> Votar

我编辑了这个问题，因为我忘了把“会话”组件，出口“会话”中的第一个组件，那个按钮“ingresar”工作，我可以访问localhost:4200/(sesion:siguiente)，在那里当组件是 postulaciones.component...当我尝试使用按钮“votar”时，它不起作用并向我显示此错误错误：未捕获（承诺）：错误：无法匹配任何路线。 URL 段：“siguiente”错误：无法匹配任何路由。 URL 段：ApplyRedirects.push../node_modules/@angular/router/fesm5/router.js.ApplyRedirects.noMatchError 处的“siguiente”......

路由器链接应该是[routerLink]="[ outlets: sesion: ['votacion'] ]"

我再次编辑了代码，该路由器链接也不起作用...我将搜索上传我的代码的位置，您可以帮助我吗？如果我把我的存储库发给你？

【参考方案2】：

我发现了问题...如果您不使用主插座，Angular 会出现错误，我创建了两个新插座并且我没有使用主插座，所以...感谢您尝试帮助我。