布局组件中的 Angular 17 命名路由器插座

Question

我的应用程序有一些通用页面，例如登录或注销页面，当用户未登录时可以导航这些页面。这些页面应在主路由器出口内正常呈现。 然后，我将用于登录用户的页面作为应用程序状态的核心，并且这些页面应在包含导航、页脚、页眉等的通用布局组件中呈现。 我无法在我希望位于布局组件中的命名路由器出口中渲染这些子项。

app.routes.ts

export const routes: Routes = [
{ path: '', redirectTo: 'landing', pathMatch: 'full' },
{
    path: 'landing',
    component: LandingPageComponent
},
{
    path: 'intern',
    component: NavigationComponent,
    children: [
        {
            path: 'enterprise',
            component: OverviewComponent,
        },
        { path: '', redirectTo: 'enterprise', pathMatch: 'full' },
    ]
},

];

navigation.component.html

<header></header>
<router-outlet name="intern"></router-outlet>
<footer></footer>

登陆和导航组件按预期呈现，但我想要位于命名的路由器输出“实习生”中的导航组件内的页面内容不存在。旁注：据我了解 - 只要子路由和命名的路由器出口共享相同的名称（此处为“intern”），我不需要在 app.routes 中定义“outled: 'intern'”属性。 ts

Answer 1

对于您的要求，您不需要命名路由器出口，当您需要在路由器出口中渲染其他组件时，您需要使用它，除了主路由器出口之外，这不是您的要求中的情况，因此您可以实现对于正常的路由本身，请找到下面的工作示例，它可以正常工作！

命名网点的角度文档

import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { LandingPageComponent } from './landing-page/landing-page.component';
import { NavigationComponent } from './navigation/navigation.component';
import { OverviewComponent } from './overview/overview.component';
import { Routes, provideRouter, RouterModule } from '@angular/router';
import 'zone.js';

export const routes: Routes = [
  { path: '', redirectTo: 'landing', pathMatch: 'full' },
  {
    path: 'landing',
    component: LandingPageComponent,
  },
  {
    path: 'intern',
    component: NavigationComponent,
    children: [
      {
        path: 'enterprise',
        component: OverviewComponent,
      },
      { path: '', redirectTo: 'enterprise', pathMatch: 'full' },
    ],
  },
];

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterModule],
  template: `
    <router-outlet></router-outlet>
  `,
})
export class App {
  name = 'Angular';
}

bootstrapApplication(App, {
  providers: [provideRouter(routes)],
});

堆栈闪电战