要导航到非子组件，我们需要使用路由对象和路由路径来手动导航。以下是一个具体的示例：

1. 在根路径下的路由配置文件中，为非子组件添加路由路径。

const appRoutes: Routes = [
  { path: 'home', component: HomeComponent},
  { path: 'about', component: AboutComponent},
  { path: 'parent', component: ParentComponent,
    children: [
      { path: 'childOne', component: ChildOneComponent },
      { path: 'childTwo', component: ChildTwoComponent },
    ]
  },
  { path: 'non-child', component: NonChildComponent } //添加非子组件的路由路径
];

2. 在导航组件中导入路由服务和路由对象，使用router.navigate()方法来手动导航到非子组件。

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-parent',
  template: `
    
Parent Component
    
    
  `,
})

export class ParentComponent {
  constructor(private router: Router) {}

  navigateToChildOne() {
    this.router.navigate(['/parent/childOne']); //导航到子组件
  }

  navigateToChildTwo() {
    this.router.navigate(['/parent/childTwo']); //导航到子组件
  }

  navigateToNonChild() {
    this.router.navigate(['/non-child']); //导航到非子组件
  }
}