Angular - 子路由不起作用答案

【问题标题】：Angular - Child routing not workingAngular - 子路由不起作用
【发布时间】：2017-12-12 10:05:59
【问题描述】：

编辑解决方案：

我最终不得不使用类似这样的东西进行导航（与下面的代码略有不同）

  onSelect(menuItem: string): void {
    this.selectedMenuItem = menuItem;
    if (menuItem == 'Upload') {
      this.router.navigateByUrl('/adminhome/(adminhomeviewport:adminupload)');
    }
    else if (menuItem == "Download") {
      this.router.navigateByUrl('/adminhome/(adminhomeviewport:admindownload)');
    }
  }

我不确定为什么必须这样做，或者为什么如果有其他方法可以做到这一点，但这给了我预期的行为。

我正在使用 Angular，我试图在我的一个视图中拥有一个命名的路由器插座。不幸的是，似乎根本没有任何效果。我的目标是在“http://localhost:4200/adminhome”页面上找到名为“admin-viewport”的路由器插座，以显示“AdminUploadComponent”及其相关视图。

截至目前，我可以成功导航到的父 html http://localhost:4200/adminhome 如下所示：

<div class="home-root">
  <ul class="home-menu"  ng-controller="AdminHomeComponent">
    <li *ngFor="let menuString of menuStrings"
        [class.selected]="menuString === selectedMenuItem"
        (click)="onSelect(menuString)">
      <span class="badge">*</span>{{menuString}}
    </li>
  </ul>
  <router-outlet name="admin-viewport"></router-outlet>
</div>

我的 app.module.ts 中的路由看起来像这样：

RouterModule.forRoot([
{
  path: 'adminlogin',
  component: AdminLoginComponent
},
{
  path: 'search',
  component: SearchQueryComponent
},
{
  path: 'adminhome',
  component: AdminHomeComponent,
  children : [
    {
      path: 'adminupload',
      component: AdminUploadComponent,
      outlet: 'admin-viewport'
    },
  ]
}

], {启用跟踪：真} )

单击按钮后，我尝试使用此代码导航我的插座。：

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

  onSelect(menuItem: string): void {
    this.selectedMenuItem = menuItem;
    if( menuItem == 'Upload' )
    {
      this.router.navigate(['/adminhome/adminupload', {outlet : 'admin-viewport'}]);
    }
  }

这当然会引发以下错误：

error_handler.ts:1 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'adminhome/adminupload;outlet=admin-viewport'
Error: Cannot match any routes. URL Segment: 'adminhome/adminupload;outlet=admin-viewport'

任何有关如何导航我的孩子路由器插座的帮助将不胜感激。

编辑：当我在实施@Seejatheran 的建议后列出我的路线时，它仍然不起作用，当我列出我的路径时我得到了这个。

【问题讨论】：

标签： javascript angularjs typescript angular-ui-router

【解决方案1】：

在你的 onSelect 方法中试试这个：

this.router.navigate([{ outlets: { admin-viewport: ['adminupload'] } }]);

希望对你有帮助

【讨论】：

【解决方案2】：

你需要在children下定义另一个路径，

{
  path: 'adminhome',
  component: AdminHomeComponent,
  children : [
    {
      path: 'adminupload',
      component: AdminUploadComponent,
      outlet: 'admin-viewport'
    },
    {
      path: 'adminupload',
      component: AdminUploadComponent,
      outlet: 'admin-viewport/:type'
    },
  ]
}

【讨论】：