Angular 2 Router - genannt Router-Ausgang Navigation von Code

Question

Verwendung @ Winkel/Router ": "3.4.7"

Lösungsvorschlag here nicht mehr funktioniert

 /** 
     The ProductComponent depending on the url displays one of two info 
     components rendered in a named outlet called 'productOutlet'. 
     */ 
     @Component({ 
      selector: 'product', 
      template: 
      ` <router-outlet></router-outlet> 
      <router-outlet name="productOutlet"></router-outlet> 
      ` 
     }) 
     export class ProductComponent{ 
     } 

@NgModule({ 
    imports: [ 
    CommonModule, 
    RouterModule.forChild([ 
      { 
      path: 'product', 
      component: ProductComponent, 
      children: [ 
       { 
       path: '', 
       component: ProductOverviewComponent, 
       outlet: 'productOutlet'}, 
       { 
       path: 'details', 
       component: ProductDetailsComponent, 
       outlet: 'productOutlet' } 
      ] 
      } 
     ] 

    )], 
    declarations: [ 
    ProductComponent, 
    ProductHeaderComponent, 
    ProductOverviewComponent, 
    ProductDetailsComponent 
    exports: [ 
    ProductComponent, 
    ProductHeaderComponent, 
    ProductOverviewComponent, 
    ProductDetailsComponent 
    ] 
}) 
export class ProductModule { 

} 

.. Die manuelle Navigation funktioniert wie erwartet

http://localhost:5000/app/build/#/product-module/product (zeigt die Übersichtskomponente in der benannten Steckdose korrekt an)

http://localhost:5000/app/build/#/product-module/product/(productOutlet:details) 

(korrekt zeigen Details Komponente in dem Namen Auslass)

DAS PROBLEM

kann nicht den richtigen Weg, herauszufinden, programatical Navigation auszuführen:

this.router.navigateByUrl('/(productOutlet:details)'); 

this.router.navigate(['', { outlets: { productOutlet: 'details' } }]); 

folgende Fehler auftreten:

Fehler: Es können keine Routen gefunden werden. URL-Segment: 'Details'.

Answer 1

können Sie versuchen, relativ Navigation als

this.router.navigate(['new'],{relativeTo:this.route}) 

Dazu Sie aktuelle Router Snapshot injizieren müssen und aktivierte Route in der Komponente als

import { Router,ActivatedRoute } from "@angular/router"; 

constructor(private router:Router,private route:ActivatedRoute){} 

Answer 2

du programmatisch wie navigieren können

this.router.navigate([{ outlets: { outletName: ['navigatingPath'] } }], { skipLocationChange: true }); 

Hinweis: skipLocationChange wird verwendet, um die URL aus der Adressleiste auszublenden.

Siehe das offizielle Dokument: https://angular.io/guide/router