Программная навигация маршрутизатора к компоненту с указанным маршрутизатором-выходом

У меня неясная проблема, связанная с программным роутером, перемещающимся внутри компонента. Я действительно много искал полезные решения, но, к сожалению, не нашел. Признаться ... Я не специалист по угловым, потому что я все еще учусь.
Короче. У меня есть 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 { }

Таким образом, у меня есть два маршрутизатора-выхода, основной и один, называемый «поиск» (см. Выше).

Во время загрузки SearchComponent (который работает!) Я хочу автоматически перейти по пути "allgarchiv" (см. Выше; router-outlet = "search"). 

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

Но это не работает. Я получаю следующую ошибку:

ОШИБКА Ошибка: не перехвачено (в обещании): Ошибка: не удается сопоставить ни один маршрут. Сегмент URL: 'allgarchiv' Ошибка: не удается сопоставить ни один маршрут. Сегмент URL: 'allgarchiv'

Если вы заглянули в шаблон, я также попробовал это, сначала щелкнув Router-Link (Test_LoadRouter; в настоящее время комментарий). И это работает как шарм !!
У меня вопрос, как мне программно перейти к маршрутизатору из SearchComponent?
Я также пробовал разные жизненные циклы, но без каких-либо результатов и с той же ошибкой.

Любая помощь действительно ценится. Спасибо заранее.


angular angular2-routing angular4-router
person bonaly    schedule 02.11.2017    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Из вашего вопроса я понял, что вы хотите перенаправить на конкретный дочерний компонент - 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. Надеюсь это поможет.

NB: используя приведенный выше код, вам НЕ нужно указывать какую-либо навигацию по маршрутизатору (как в ngAfterContentInit()) в search component для первоначальной загрузки AllgarchivComponent.

person Veena K. Suresh    schedule 03.11.2017