0

I have a nebulous problem concerning a programmatically router navigate within an component. I really searched a lot for helpful solutions but I didn't get it, unfortunately. To confess...I'm not an angular expert because I'm still learning.
In short. I have an 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 { }

In summary I have two router-outlets, the primary one and one it's called "search" (s. above).

During loading the SearchComponent (that works!) I want to route to path "allgarchiv" (s. above; router-outlet = "search") automatically. 

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']}}]  );    
  }
}

But this doesn't work. I get following error:

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

If you have a look within the Template I also tried this by first click on a Router-Link (Test_LoadRouter; currently comment). And this works like a charm!!
My question is how I could navigate to the router programmatically from SearchComponent?
I also tried different lifecyle-hooks but without any results and the same error.

Any help is really appreciate. Many thanks in advance.

4

1 回答 1

1

从您的问题中，我了解到您想要路由到特定的子组件 - onload。请尝试以下代码：

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'
       }
]

} ];

如果你只需要加载AllgarchivComponent，你不需要'allgarchiv'在你的path. 如果要加载带有 url 的页面，'search/allgarchiv'则只需'allgarchiv'在path. 希望这可以帮助。

注意：使用上面的代码，您不必在ngAfterContentInit()初始search component加载AllgarchivComponent.

于 2017-11-03T10:29:15.150 回答