Question

我正在使用路由器插座来显示用户选择的不同组件

<nav>
  <a id="home" routerLink="/home" >Home</a>
  <a id="about" routerLink="/about" routerLinkActive="active">About</a>
  <a id="open-close" routerLink="/open-close" routerLinkActive="active">Open/Close</a>
  <a id="status" routerLink="/status" routerLinkActive="active">Status Slider</a>
  <a id="toggle" routerLink="/toggle" routerLinkActive="active">Toggle Animations</a>
  <a id="enter-leave" routerLink="/enter-leave" routerLinkActive="active">Enter/Leave</a>
  <a id="auto" routerLink="/auto" routerLinkActive="active">Auto Calculation</a>
  <a id="heroes" routerLink="/heroes" routerLinkActive="active">Filter/Stagger</a>
  <a id="hero-groups" routerLink="/hero-groups" routerLinkActive="active">Hero Groups</a>
   <a id="My-App" routerLink="/My-App" routerLinkActive="active">My App</a>
</nav>

<div [@routeAnimations]="prepareRoute(outlet)" >
  <router-outlet #outlet="outlet"></router-outlet>
</div>

这是“我的应用”标签

<div contenteditable="true">
  Patients
</div>

<ul>
  <li *ngFor="let patient of patients" >
        <a > {{patient.name}} </a>
  </li>
</ul>

现在，每当用户单击或选择任何患者时，我都希望导航到一个名为“ Child-Component”的新组件，并希望显示患者的完整详细信息。

使用/不使用顶级“ Router-Outlet”实现的最佳方法是什么？

Answer 1

我猜您需要显示导航并用子路线更新页面的某些部分。

_______________________________
Nav           Nav           Nav
_______________________________


      Full Details

_______________________________

在app.compoent.ts

RouterModule.forRoot(
[
    {
        path: '',
        component: AppComponent,
        children: [
            {
                path: 'home',
                component: HomeComponent
                pathMatch: 'full',
            },
            {
                path: 'about',
                loadChildren: './about/about.module#AboutModule',
                pathMatch: 'full',
            }
        ],
    },
]);

about路线我已经展示了使用延迟加载模块，这是仅在需要时才加载应用程序部分的最佳方法。

很久以前，我已经创建了一个工作角度项目来测试这些选项，您可以检查该项目以供参考

https://stackblitz.com/edit/lazy-loading-and-router-2?file=src%2Fapp%2Fcustomers%2Fcustomers-routing.module.ts

如果需要更多说明，请告诉我。

子组件的角度导航

1 个答案: