Angular 路由器出口未渲染

Question

我正在尝试使用独立组件开发我的第一个 Angular 项目。

我有 3 个基本组件，其路由如下：

export const routes: Routes = [
  {path: 'calendar', component: CalendarComponent},
  {path: 'notes', component: NotesComponent},
  {path: 'settings', component: SettingsComponent}
];

如果我的 app.component.html 仅包含

<router-outlet></router-outlet>

，它将呈现路由组件的内容。

如果我的 app.component.html 包含以下内容，则路由器出口的内容根本不会呈现。此示例中的所有组件仅包含默认的

<p>x works!</p>

<app-navigation></app-navigation>
<router-outlet></router-outlet>

app.component.ts

import {Component} from '@angular/core';
import {CommonModule} from '@angular/common';
import {RouterOutlet} from '@angular/router';
import {NavigationComponent} from "./shared/navigation/navigation.component";

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterOutlet, RouterOutlet, NavigationComponent],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss'
})
export class AppComponent {
}

路线配置

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideClientHydration(),
    importProvidersFrom(LucideAngularModule.pick({ CalendarDays, NotebookText, Settings })),
  ]
};

bootstrapApplication(AppComponent, appConfig).catch((err) => console.error(err));

有谁知道为什么我会出现这种意想不到的行为？

Answer 1

尝试在路线列表中添加路径“”：

{path: '', component: AppComponent }