javascript - Angular 路由问题 - 2 个 donut 孔

Question

我正在审查 Angular 中的模板项目

引导组件有一个如下所示的 HTML 模板。很有道理。应用程序标题、应用程序侧边栏等标签将包含由带有匹配选择器的组件提供的内容。这一切都检查出来了。

<div class="main-wrapper">
    <app-header></app-header>
    <app-sidebar></app-sidebar>


    <router-outlet></router-outlet>
    <div class="task-overlay" data-reff="#task_window"></div>
    <div class="sidebar-overlay" data-reff="#sidebar"></div>


</div>

侧边栏可以预见是一个菜单，并且有一些看起来像这样的路线(只是摘录..)

{ path: 'events', component: EventsmainComponent },
  { path: 'chat', component: ChatsComponent },
  { path: 'activities', component: ActivitiesComponent },
  { path: 'inbox', component: EmailmainComponent },

这些组件具有在整个项目(应用程序电子邮件)的任何 HTML 模板中都找不到的选择器。我相信 Angular 是在“说”

“当 url 为\inbox 时，我将获取 EmailMainComponent 并将其插入到 ROUTER-OUTLET 占位符标记中”

我的理解就到此为止了。

<强>1。我没有看到路由中提到 Router-Outlet？ Router-Outlet是保留标签吗？

<强>2。如果我的布局是分屏的，并且我希望一半的菜单选项刷新上半部分，其余的菜单项刷新下半部分，该怎么办？我如何告诉后一组中的链接目标应该是 Router-Outlet2？

Answer 1

来自documentation Angular 路由器:

The RouterOutlet is a directive from the router library that is used like a component. It acts as a placeholder that marks the spot in the template where the router should display the components for that outlet.

您可以使用以下名称添加多个路由器 socket 标签:

<!-- This is the placeholder for component of the first part of the screen -->
<router-outlet name="first">   

...
<!-- This is the placeholder for component of the second part of the screen -->
<router-outlet name="second">

并在路由配置中引用它们，如下所示:

...
{path: '/yourPath', component: YourComponent, outlet: 'first'},
{path: '/yourPath', component: OtherComponent, outlet: 'second'}
...

因此，如果您转到网址 /yourPath，您将在第一个框中看到 YourComponent，在第二个框中看到 OtherComponent