更新

Question

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

这是我的路线（）：

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

我的应用。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： （此按钮可“自动安装”）

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

请帮助我，我不知道不工作的原因

这是错误：

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

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

即使我是第一次将路由更改为第一次更改，也要

Answer 1

发生错误“ ... 未捕获（承诺）： ...”，因为主要路线无法处理“ siguiente”路线。

要解决路线错误，您可以添加主要路线以捕获所有路线：

{
    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会出现错误，我创建了两个新的插座，而我没有使用主要插座，所以...感谢您的帮助。

Angular 6的路由无法与“ Router”模块一起使用，我想我有一个错误，但我不知道它是什么

2 个答案:

更新