如何分辨锚定在多个组件中的路由器出口标签

Question

在app.component.html中，我们有一个<路由器-出口>，它将动态加载其他模块、组件和视图。

但是，如果我们有第二个组件(在另一个模块中导入)，并且有自己的<路由器-出口>

角如何区分现有的两个路由器，例如，角如何知道？

"router1“(包含路径：”/url-1“路径：”/url-2“)被加载到app.component.html中。"router2“(包含路径：”/url-3“路径：”/url-4“)被加载到secondComp.component.html中。

当app.componen.html和secondComp.component.html都有这个标记时，特别是<路由器-出口>

角如何知道x组件需要使用/加载哪个路由器定义。

只是为了学习的目的

Answer 1

路由的角度概念是在app.component.html中定义为全局路由的概念，它意味着应用程序默认UI或父路由的呈现。&在我们的路由文件中，我们区分了路由的父路径和子路径，例如：

app.component.html

<div>
    <router-outlet></router-outlet>
</div>

app.module.ts

进口部分

RouterModule.forRoot([
      { path: '', component: LoginComponent, pathMatch: 'full' },
      { path: 'Login', component: LoginComponent, canActivate: [AuthGuardService] },
      { path: 'Home', loadChildren: () => import('./librarymanagement/librarymanagement.module').then(m => m.LibraryManagementModule) },

])

因此，所有父级路由都在父级Login、Home上呈现，因此这两个路由都被视为父路由。

现在在家庭路由加载功能模块称为LibraryManagementModule。

const routes: Routes = [
  {
    path: '', component: LibraryManagementComponent,
    children: [{ path: 'Dashboard', component: DashbordComponent, canActivate: [AuthGuardService] },
      { path: 'country', component: CountryComponent, canActivate: [AuthGuardService] },
  }

现在，子路由加载其名为仪表板( country its route )的子设备。作为RouterModule的孩子。

RouterModule.forChild(routes)

因此，所有路由都被视为树，以指示要调用的特定标识符。在LibraryManagementModule引导组件内部是LibraryManagementComponent，它包含

LibraryManagement.component.html

<div>
        <router-outlet></router-outlet>
</div>