具有命名路由器出口的程序化路由器导航到组件答案

【问题标题】：Programmatic Router Navigation to Component with named router-outlet具有命名路由器出口的程序化路由器导航到组件
【发布时间】：2018-04-15 08:06:49
【问题描述】：

我有一个关于以编程方式路由器在组件内导航的模糊问题。我确实搜索了很多有用的解决方案，但不幸的是我没有得到它。坦白说……我不是角度专家，因为我还在学习。
简而言之。我有一个 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”（s. above; 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']}}]  );    
  }
}

但这不起作用。我收到以下错误：

ERROR 错误：未捕获（在承诺中）：错误：无法匹配任何路由。 URL 段：“allgarchiv”错误：无法匹配任何路由。网址段： 'allgarchiv'

如果您在模板中查看过，我也尝试过首先单击路由器链接（Test_LoadRouter；当前评论）。这就像一个魅力！
我的问题是如何从 SearchComponent 以编程方式导航到路由器？
我还尝试了不同的生命周期挂钩，但没有任何结果和相同的错误。

任何帮助都非常感谢。非常感谢。

【问题讨论】：

标签： angular angular2-routing angular4-router

【解决方案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，则不需要在path 中指定'allgarchiv'。如果要加载带有 url 'search/allgarchiv' 的页面，则只需在 path 中指定 'allgarchiv'。希望这会有所帮助。

注意：使用上面的代码，您不必在search component 中提供任何路由器导航（就像您在ngAfterContentInit() 中所做的那样）来初始加载AllgarchivComponent。

【讨论】：