web-dev-qa-db-fra.com

Angular 4 Le chargement paresseux avec un routeur-prise nommé ne fonctionne pas

J'ai un problème avec le chargement différé qui n'est pas sur le point d'être acheminé vers un routeur nommé-outlet. Quelqu'un peut-il regarder où je quand mal? J'ai une page principale où se trouve un lien vers Produit -> Prise de routeur par défaut et Détails du produit -> Prise de routeur nommée.

  <div>
   <div><a [routerLink]="['product']"> Product </a> </div>
   <div><a [routerLink]="['productdetail',{outlets:{productdetail: 'detail'}}]"> Product Detail </a> </div>
  <div> <router-outlet></router-outlet></div>
  <div> <router-outlet name="detail"></router-outlet>
</div>

Vous trouverez ci-dessous le code du plongeur. 

Code Plunker

angularlazy-loading
5
AlbertK

C'est un bug connu, vous pouvez suivre le problème ici

La solution de contournement ou nous pouvons dire que la solution à ce problème est, utilisez des chemins non vides pour votre top routes de niveau si des routes auxiliaires (c’est-à-dire nommées) existent dans un module chargé paresseux.

Le seul défaut que je peux voir, c’est qu’un segment d’URL supplémentaire a été ajouté dans les itinéraires.

MainRoutingModule: chemin non vide de premier niveau (c'est-à-dire "chemin: 'load'")

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

import { MainpageComponent } from './mainpage.component';
import { ProductComponent } from './product.component';
import { ProductDetailComponent } from './productdetail.component';

const childroutes: Routes = [

 { path: 'load', component: MainpageComponent  ,
    children: [ 
      {path: 'product', component: ProductComponent
      {path: 'productdetail', component: ProductDetailComponent,
        outlet: 'detail' 
      },

    ]
 },


];

export const routing: ModuleWithProviders = RouterModule.forChild(childroutes);

const newLocal: NgModule = {
    imports: [RouterModule.forChild(childroutes) ],
    exports: [RouterModule, ],
    declarations: []
};

@NgModule(newLocal)


export class MainRoutingModule { }

MainpageComponent: La syntaxe correcte pour utiliser les routes secondaires.

[routerLink] = "[{points de vente: {détail: ['productdetail']}}]"

import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-main',
  template: `
  <div>

  <div><a [routerLink]="['product']"> Product </a> </div>
  <div><a [routerLink]="[{outlets:{detail:['productdetail']}}]"> Product Detail </a> </div>
  <div> <router-outlet></router-outlet></div>
  <div> <router-outlet name="detail"></router-outlet>

</div>
  `,
  encapsulation: ViewEncapsulation.None,
})

export class MainpageComponent {}

LoginComponent:

Utilisez [routerLink] = "['mainpage/load']" pour charger le module principal.

import { Component, OnInit, OnDestroy } from '@angular/core';

@Component({
  selector: 'app-login',
  template: `This is login page place holder <br> <a [routerLink]="['mainpage/load']">Go to Main Page</a>`,

})

export class LoginComponent implements Oninit, OnDestroy {
constructor() {}

ngOnInit(): void {}

}

Démo: https://plnkr.co/edit/0ZpNL3lvbRbexLzQqRZh?p=preview

7
mohit uprim

Disons que les itinéraires font partie de profile ProfileComponent (example.com/profile)

profile.component.ts

<a routerLink="/profile/about">About</a>
<a routerLink="/profile/edit">Edit</a>
<a routerLink="/profile/settings">Settings</a>
<router-outlet></router-outlet>

Il y a trois composants différents:

  • A propos du composant
  • EditComponent
  • ParamètresComposant

Ensuite, les itinéraires ressembleront à:

{
    path: 'profile',
    component: ProfileComponent,
    children: [
        {
            path: 'about',
            component: AboutComponent
        },
        {
            path: 'edit',
            component: EditComponent
        },
        {
            path: 'settings',
            component: SettingsComponent
        }
    ]
}
0
Nebojsa Sapic