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

Question

在app.component.html中我们有一个<router-outlet祝辞它将动态加载其他模块、组件和视图。>

但是如果我们有第二个组件(导入到不同的模块中)，它有自己的

angular如何区分两个现有的路由器出口?例如，angular如何知道

"router1"(包含路径:"/url-1"路径:"/url-2")被加载到app.component.html中。和"router2"(包含路径:"/url-3"path:"/url-4")被加载到第二个comp .component.html

app. component.html和secondComp.component.html都有这个标签

angular是如何知道哪个路由器定义需要被x组件使用/加载的呢?

仅供学习使用

Answer 1

Angular的路由概念是在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] },
}

现在子路由在Homeroute中加载名为[Dashboard,country]的子路由。作为RouterModule的孩子

RouterModule.forChild(routes)

所以所有的路由都作为树来表示要调用的特定标识符。LibraryManagementModulebootstrap组件内部是LibraryManagementComponent，其中包含

LibraryManagement.component.html

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