Question

编辑解决方案：

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

  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，而我正在尝试在我的一个视图中使用已命名的路由器插座。不幸的是，似乎没有任何工作。我的目标是让路由器插座命名为＆＃39; admin-viewport＆＃39;发现在＆＃39; http://localhost:4200/adminhome＆＃39;页面显示＆＃39; AdminUploadComponent＆＃39;和它的相关观点。

截至目前，我可以成功导航到的父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'
    },
  ]
}

] {enableTracing：true} ）

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

  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的建议后列出我的路线时，它仍然无法正常工作，当我列出我的路径时，我就明白这一点。

Answer 1

您需要在子项下定义另一个路径，

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

Answer 2

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

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

希望这有帮助

Angular - 子路由不起作用

2 个答案: