html - Angular 6'nın rotaları "Router" modülü ile çalışmıyor, sanırım bir hata yapmışım ama ne olduğunu bilmiyorum

Rotaları ayarladım ve 2 Outlet'im var, birincil ve ikincisi "Sesion" olarak adlandırılmış, ancak "Sesion" Outlet için birkaç rota belirlememe rağmen, yalnızca ilkine gitmeme izin veriyor, yani "Ingresar" düğmesine bastığımda (bunu daha sonra göreceksiniz) beni gerçekten belirlenen rotaya götürüyor ve bileşeni değiştiriyor, ancak mevcut bileşendeki başka bir düğmeyle Outlet'in içeriğini değiştirmeye çalıştığımda artık çalışmıyor ... ya da önceki bileşeni görüntülemeye geri gitmek ya da başka birine gitmek için.

Bu benim rotalarım():

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

Benim app.HTML'im (varsayılan bileşen)

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

Benim Sesion.component.html: (Bu buton "ingresar" çalışıyor)

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

My acciones.component.html (ana çıkışın içeriği)

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

My postulation.component.html() (Bu buton çalışmıyor "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>

Benim votacion.component.html: sadece varsayılan bir bileşen

<p>
  votacion works!
</p>

Lütfen bana yardım edin, çalışmamasının nedenini bilmiyorum

Bu hata şudur:

HATA Hata: Yakalanmamış (promiste): Hata: Herhangi bir rotayla eşleşilemiyor. URL Segmenti: 'siguiente'

https://github.com/marco7247/APPDinam.git bu kod, eğer biri bana yardımcı olabilirse lütfen.

ROTALARI SIRASINI DEĞİŞTİRSEM BİLE, SADECE İLK DEĞİŞİKLİKTE İLK SEFERDE ÇALIŞIYOR.

Cevap #1

Hata "...Uncaught (in promise):..." oluşuyor çünkü birincil rota 'siguiente' rotasını işleyemiyor.

Rota hatasını düzeltmek için bir birincil tümünü kapsayan rota ekleyebilirsiniz:

{
    path: '**',
    component: AnotherComponent
}

veya birincil adlandırılmış bir rota:

{
    path: 'siguiente',
    component: AnotherComponent
}

İkincil rotalara, birincil rotalarla aynı şekilde isimleri üzerinden erişilmez. Bir ikincil rotaya gitmek için bağlantı şöyle görünecektir: http://localhost:4200/(sesion:siguiente).

http://localhost:4200/siguiente'ye eriştiğinizde, birincil rotaya ulaşacaksınız ve ikincil rota '' olarak çözümlenecektir, bu yüzden ikincil rota-outlet'te SesionComponent içeriğini görüyorsunuz.

Bunu öğrenmek için Angular belgelerini de ziyaret etmek isteyebilirsiniz.

Güncelle

ayrıca, bağlantının düzeltilmesi gerekiyor, işte ikincil rotaya yönlendirmek için doğru kod:

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

Cevap #2

Sorunu buldum... Angular, birincil outlet'i kullanmazsan hata veriyor, ben iki yeni outlet oluşturdum ve birincil olanı kullanmıyordum, yani... bana yardım etmeye çalıştığınız için teşekkürler.