如何为三个不同的视图添加 Angular 路由

Question

我们正在将 AngularJS 1.8 应用程序迁移到 Angular 13，但我无法找到有关如何使用 Angular 路由创建三个不同视图的任何提示。观点是：

主要
监控
入职

每个视图都有独特的布局，其中信息显示在单个 router-outlet 中。 app-component.html 只包含 <router-outlet></router-outlet>，我想将每个视图都放在这个插座内。

我定义了以下路由：

const routes = [
  { path: '',
    pathMatch: 'full',
    component: MainComponent,
    children: [
      { path: 'mainsub', component: MainSubComponent }
    ]
  },
  { path: 'onboarding',
    pathMatch: 'full',
    component: OnboardingComponent,
    children: [
      { path: 'onboardingsub', component: OnboardingSubComponent }
    ]
  },
  { path: 'monitor',
    pathMatch: 'full',
    component: MonitorComponent,
    children: [
      { path: 'monitorsub', component: MonitorSubComponent }
    ]
  }
];

在MainComponent我想导航到第一个child:

constructor(private router:Router, private route:activatedRoute) {};

ngOnInit() {
  this.router.navigate(['mainsub'], {relativeTo:this.route});
}

然而，这失败了，因为路线 mainsub 未知。

我在这里错过了什么？

Answer 1

试试第一个孩子：

constructor(route: ActivatedRoute) {
  route.url.subscribe(() => {
    console.log(route.snapshot.firstChild.data);
   });
}

Answer 2

显然我错过了很多 ;)

在网上进行更多搜索后，我找到了 this 篇关于 pathMatch 用途的文章。简而言之，我需要使用以下路线（对于主视图）：

const routes = [
{
  path: '', pathMatch: 'prefix', component: MainComponent,
  children: [
    { path: '', pathMatch: 'full', redirectTo: 'mainsub' },
    { path: 'mainsub', component: MainSubComponent }
  ]
};

这也消除了在 MainComponent 中添加路由器重定向的需要。

Answer 3

如果您希望监控和入职组件成为主要组件的子组件（出现在您的问题中），您可能必须这样做：

const appRoutes: Routes = [
  { path: '', redirectTo: 'main', pathMatch: 'full'},
  { path: 'main', component: MainComponent, children: [
      {path:'monitoring', component: MonitoringComponent, outlet: 'c'},
      {path:'onboard', component: OnBoardComponent, outlet: 'c'},
    ] },
];

那么你的路由器插座是这样的：

<router-outlet name="c"></router-outlet>

最后链接应该是：

<a [routerLink]="['/main', { outlets: { c: ['monitoring'] } }]">
   Monitoring
</a>

<a [routerLink]="['/main', { outlets: { c: ['onboard'] } }]">
   Onboard
</a>

让我知道它是否有效。

如何为三个不同的视图添加 Angular 路由

How to add Angular routing for three distict views

angular

angular-router