Programmatic Router Navigation zu Komponente mit named Router-Ausgang

Question

Ich habe ein nebulöses Problem in Bezug auf eine programmgesteuert Router innerhalb einer Komponente zu navigieren. Ich habe wirklich viel nach hilfreichen Lösungen gesucht, aber ich habe es leider nicht bekommen. Zu bekennen ... Ich bin kein kantiger Experte, weil ich noch lerne.
Kurz gesagt. Ich habe eine AppRoutingModule:

.... 
export const routes: Routes = [ 
    { 
    path: '', 
    redirectTo: 'search', 
    pathMatch: 'full' 
    }, 
    { 
    path: 'search', 
    component: SearchComponent, 
    children: [ 
     { 
     path: 'allgarchiv', 
     component: AllgarchivComponent, 
     outlet: 'search' 
     } 
    ] 
    } 
]; 

@NgModule({ 
    imports: [RouterModule.forRoot(routes)], 
    exports: [RouterModule] 
}) 
export class AppRoutingModule { } 

Zusammengefasst Ich habe zwei Router-Outlets, die primäre und man es auf "Suchen" (s. Oben) genannt wird.

Während des Ladens der SearchComponent (das funktioniert!) Möchte ich automatisch zum Pfad "allgarchiv" (s. Oben; router-outlet = "search") routen.

import { AfterContentInit, AfterViewInit, Component, OnInit } from '@angular/core'; 
import { ActivatedRoute, Router } from '@angular/router'; 

@Component({ 
    selector: 'axa-search', 
    template: ` 
    <br> 
    <ngb-tabset> 
     <ngb-tab title="Suche" id="tab-search"> 
      <ng-template ngbTabContent> 
     <!-- <a [routerLink]="[{ outlets: { search: ['allgarchiv'] } }]">Test_LoadRouter</a>  --> 
      <router-outlet name="search"></router-outlet> 
      </ng-template> 
     </ngb-tab> 
     <ngb-tab id="tab-list" [disabled]="false" title="Treffer"> 
      <ng-template ngbTabContent>TO FILL!!!</p> 
      </ng-template> 
     </ngb-tab> 
    </ngb-tabset> 
    `, 
    styles: [] 
}) 
export class SearchComponent implements AfterContentInit { 

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

    ngAfterContentInit() { 
// this.router.navigate(['allgarchiv', { outlets: { search: { relativeTo: this.route }}}]);  
    this.router.navigate([{ outlets: { search: ['allgarchiv']}}] );  
    } 
} 

Aber das funktioniert nicht. Ich erhalte folgende Fehlermeldung:

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'allgarchiv' Error: Cannot match any routes. URL Segment: 'allgarchiv'

Wenn Sie einen Blick in der Vorlage haben ich auch versucht, dies durch ersten Klick auf einer Router-Link-(Test_LoadRouter, derzeit Kommentar). Und das funktioniert wie ein Zauber !!
Meine Frage ist, wie ich programmgesteuert von SearchComponent zum Router navigieren könnte?
Ich habe auch verschiedene Lifecyle-Hooks ausprobiert, aber ohne Ergebnisse und den gleichen Fehler.

Jede Hilfe ist wirklich zu schätzen. Vielen Dank im Voraus.

Answer 1

Von Ihrer Frage, was ich verstanden habe, wollten Sie zu einer bestimmten Kind-Komponente - onload. Bitte versuchen Sie den Code unten:

const routes: Routes = [ 
    { 
     path: '', 
     redirectTo: 'search', 
     pathMatch: 'full' 
    }, 
    { 
     path: 'search', 
     component: SearchComponent, 
     children: [ 
     {        /* page loads on url '/search' with 'AllgarchivComponent' */ 
      path: '', 
      component: AllgarchivComponent, 
      outlet: 'search' 
     }, 
     {        /* page loads on url '/search/allgarchiv' */ 
     path: 'allgarchiv', 
     component: AllgarchivComponent, 
     outlet: 'search' 
     } 
] 

} ]; Wenn Sie nur die AllgarchivComponent laden müssen, müssen Sie 'allgarchiv' in Ihrer path nicht angeben. Wenn Sie die Seite mit der URL 'search/allgarchiv' laden möchten, müssen Sie nur 'allgarchiv' im path angeben. Hoffe das hilft.

Hinweis: Unter Verwendung des oben genannten Codes, müssen Sie keine Router-Navigation (wie Sie in ngAfterContentInit() getan haben) im search component geben, um zunächst die AllgarchivComponent zu laden.