web-dev-qa-db-de.com

Angular 4 Lazy Loading mit benanntem Router-Ausgang funktioniert nicht

Ich habe ein Problem mit dem verzögerten Laden, das nicht zu einem benannten Router-Ausgang führt. Kann jemand schauen wo ich wann falsch bin? Ich habe eine Hauptseite, auf der ein Link zu Product -> Default Router Outlet und Product Detail -> Named Router Outlet vorhanden ist.

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

Unten ist der Plunkercode. 

Plunker Code

5
AlbertK

Dies ist ein bekannter Fehler, Sie können das Problem verfolgen hier

Die Problemumgehung, oder wir können sagen, Lösung für dieses Problem ist, verwenden Sie nicht leere Pfade für Ihre oberste Level-Routen, wenn in einem Lazy-Loading-Modul zusätzliche (d. h. benannte) Routen vorhanden sind.

Der einzige Fehler, den ich sehen kann, ist ein zusätzliches URL-Segment in den Routen

MainRoutingModule: Oberer nicht leerer Pfad (d. H. "Path: '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: Die korrekte Syntax für die Verwendung der sekundären Routen.

[routerLink] = "[{outlets: {detail: ['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:

Verwenden Sie [routerLink] = "['mainpage/load']", um das Hauptmodul zu laden.

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

}

Demo: https://plnkr.co/edit/0ZpNL3lvbRbexLzQqRZh?p=preview

7
mohit uprim

Angenommen, die Routen sind Teil von 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>

Es gibt drei verschiedene Komponenten:

  • AboutComponent
  • EditComponent
  • Einstellungskomponente

Die Routen sehen dann so aus:

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