在angular中创建递归动态扩展导航的正确方法是什么，以及如何正确切换其菜单项？

// 导航组件
@Component({
  selector: 'app-navigation',
  template: `
    <ul>
      <ng-container *ngFor="let item of navigationItems">
        <li (click)="navigate(item)">
          {{ item.name }}
          <ng-container *ngIf="item.children">
            <app-navigation [navigationItems]="item.children"></app-navigation>
          </ng-container>
        </li>
      </ng-container>
    </ul>
  `,
})
export class NavigationComponent {
  @Input() navigationItems: NavigationItem[];

  constructor(private router: Router) {}

  navigate(item: NavigationItem): void {
    this.router.navigate([item.route]);
  }
}

// 导航项接口
interface NavigationItem {
  name: string;
  route: string;
  children?: NavigationItem[];
}

<app-navigation [navigationItems]="navigationItems"></app-navigation>

// 导航项数据
navigationItems: NavigationItem[] = [
  {
    name: 'Home',
    route: '/home',
  },
  {
    name: 'Products',
    route: '/products',
    children: [
      {
        name: 'Category 1',
        route: '/products/category1',
      },
      {
        name: 'Category 2',
        route: '/products/category2',
      },
    ],
  },
];