web-dev-qa-db-fra.com

Angular 6 - plusieurs prises de routeur

Je veux avoir un Enter-comp. comme aperçu et essentiellement deux enfants-comp. Par exemple, une connexion et un registre d'enregistrement. De plus, je veux gérer cela avec plusieurs prises de routeur. Mais "bien sûr" cela ne fonctionne pas encore. Ça me fait jeter: Error: Cannot match any routes. URL Segment: ',%20%7Boutlets:%20%7Blogin:%20%5B'login'%5D%7D%7D'

Configuration de routage d'application

const routes: Routes = [
  {path: 'stories', component: StoriesComponent},
  {path: '', component: EnterOverviewComponent, children: [
      {path: 'login', component: LoginComponent, outlet: 'login'},
      {path: 'register', component: RegisterComponent, outlet: 'register'},
    ]}
];

Racine d'application

<app-navbar></app-navbar>

<router-outlet></router-outlet>
<router-outlet name="login"></router-outlet>
<router-outlet name="register"></router-outlet>

Navbar comp.

Attendre l'erreur ici. Je soupçonne que j'appelle la fausse route:

<ul class="navbar-nav ml-auto">
  <li class="nav-item" routerLinkActive="active">
    <a class="nav-link" routerLink="/, {outlets: {login: ['login']}}">Sign In</a>
  </li>
  <li class="nav-item" routerLinkActive="active">
    <a class="nav-link" routerLink="/, {outlets: {register: ['register']}}">Register</a>
  </li>
</ul>
angularroutingangular2-routingrouter-outlet
7
MarcoLe

Le problème est que vous essayez d'envoyer une route auxiliaire sous forme de chaîne. routerLink évalue la valeur sur RHS sous forme de chaîne. C'est pourquoi vous voyez des personnages étranges sur votre itinéraire. Pour que cela fonctionne, vous devez essayer comme suit -

<a [routerLink]="[{ outlets: { example: ['example1'] } }]">Example</a>

Dans ton cas

 <a [routerLink]="[{ outlets: { register: ['register'] } }]">Example</a>//outletName:['route-path']

[~ # ~] modifié [~ # ~]

La sortie enfant nommée par rapport à la route ROOT ne fonctionne pas et semble être un bogue

Une solution de contournement est mentionnée dans la section commentaires .

[~ # ~] ou [~ # ~]

Vous pouvez modifier les configurations comme ci-dessous -

{
    path: '', component: LoginComponent
 },
 {
    path: 'example1', component: ExampleComponent, outlet: 'example'
 }
4
Avij

Veuillez vous référer à l'exemple ci-dessous

import { Component, NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

@Component({
selector: 'my-app',
template: 
`<a routerLink='A'>A</a>
<a routerLink='B'>B</a>
<br>
<a [routerLink]='[{ outlets: { secondRouter: ["C"] } }]'>C</a>
<a [routerLink]='[{ outlets: { secondRouter: ["D"] } }]'>D</a>

<router-outlet></router-outlet>
<router-outlet name='secondRouter'></router-outlet>`,
})
export class AppComponent  {}

/***** fitst router */
@Component({
selector: 'app-a',
template: '<h1>A</h1>',
})
export class AComponent  {}

@Component({
selector: 'app-b',
template: '<h1>B</h1>',
})
export class BComponent  {}

 /****** second router */

@Component({
selector: 'app-c',
template: '<h1>C</h1>',
})
export class CComponent  {}

@Component({
selector: 'app-d',
template: '<h1>D</h1>',
})
export class DComponent  {}

const routes: Routes = [
 { path: 'A', component: AComponent },
 { path: 'B', component: BComponent },
 { path: 'C', component: CComponent, outlet: 'secondRouter' },
 { path: 'D', component: DComponent, outlet: 'secondRouter' }
 ];

 @NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class RootRoutingModule { }
0
murthy naika k