辅助路线未显示组件

Question

我正在尝试在我的 angular 应用程序中实现辅助路由，但由于某种原因，该组件未显示，即使浏览器中的 url 发生了变化。

我的路由模块看起来像这样：

const routes: Routes = [
    { path: 'students', canActivate: [AuthGuard], component: StudentsComponent, outlet: 'main' },
    { path: 'login', component: LoginComponent },
    { path: '', canActivate: [AuthGuard], component: HomeComponent }
];

export const routing: ModuleWithProviders = RouterModule.forRoot(routes);

HomeComponent 的 HTML 模板基本上可以归结为：

<router-outlet></router-outlet>

<div class="">
    <button [routerLink]="[{outlets: {main: ['students'] } }]">aux route</button>

<!-- <button [routerLink]="[{outlets: {main: ['/students'] } }]">aux route</button>
Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: '%2Fevents' -->

    <router-outlet name="main"></router-outlet>
</div>

所以，基本上当我在浏览器中打开 http://localhost:4200 时，我可以看到我的辅助按钮，当我单击它时，浏览器中的 url 变为：http://localhost:4200/(main:students)

看起来不错，但是 StudentComponent 从未显示在页面上。

我想知道我做错了什么...

StudentComponent只显示默认：

<p>StudentComponent works!</p>

编辑：我在 stackblitz 中添加了 link 以显示问题。请注意第三个组件的内容是如何从不显示的。

Answer 1

我试图在 stackblitz 上为您挽救一个例子。希望对你有帮助

应用路由

import { Routes, RouterModule } from '@angular/router';
import ComponentOne from './component-one';
import ComponentTwo from './component-two';
import ComponentAux from './component-aux';

export const routes: Routes = [
  { path: '', redirectTo: 'component-one', pathMatch: 'full' },
  { path: 'component-one', component: ComponentOne },
  { path: 'component-two', component: ComponentTwo },
  { path: 'component-aux', 
    component: ComponentAux, 
    outlet: 'sidebar'
  }
];


export const routing = RouterModule.forRoot(routes);

应用组件模板

<nav>
    <a [routerLink]="['/component-one']">Component One</a>
    <a [routerLink]="['/component-two']">Component Two</a>
    <a [routerLink]="[{ outlets: { 'sidebar': ['component-aux'] } }]">Component Aux</a>
</nav>
<div style="color: green; margin-top: 1rem;">Outlet:</div>
<div style="border: 2px solid green; padding: 1rem;">
    <router-outlet></router-outlet>
</div>

<div style="color: green; margin-top: 1rem;">Sidebar Outlet:</div>
<div style="border: 2px solid blue; padding: 1rem;">
    <router-outlet name="sidebar"></router-outlet>
</div>

Answer 2

这是您的 stackblitz 的 modified version，它似乎适用于这些路线：

const appRoutes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  { path: 'first', component: FirstComponent },
  {
    path: 'second', component: SecondComponent,
    children: [
      {
        path: 'third',
        component: ThirdComponent,
        outlet: 'third'
      }
    ]
  },
];

第二个组件的模板如下：

<a [routerLink]="[{ outlets: { third: ['third'] } }]">Aux third component</a>

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

辅助路线未显示组件

Auxiliary routes not showing component

angular-routing

angular

angular-router