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

Question

我设置了路线，我有 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这是代码，如果有人可以帮助我的话。

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

Answer 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>

Answer 2

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