Angular 角度材料侧导航内容策略

我有一个标准的sidenav布局

<mat-sidenav-container>

   <mat-toolbar></mat-toolbar>

   <router-outlet></router-outlet>

   <mat-sidenav></mat-sidenav>
   <mat-sidenav position="end"></mat-sidenav>

</mat-sidenav-container>

我想用第二个sidenav作为内容区

在这个项目中，所有活动路由都是简单的组件，带有一个画布区域和一些关于“实验”的基本信息。可能是一些基本的窗体滑块或控件

<div>
   Some Content
<div>
<canvas>
</canvas>

一些内容

基本上，我希望content div放在第二个sidenav容器中。只有画布在视觉上是实际组件的子级

<mat-sidenav-container>

   <mat-toolbar></mat-toolbar>

   <router-outlet>
        <canvas-component>
             <canvas></canvas>
        </canvas-component>
   </router-outlet>

   <mat-sidenav></mat-sidenav>
   <mat-sidenav position="end">
       <div>
            Some Content
       <div>
   </mat-sidenav>

</mat-sidenav-container>

一些内容

这似乎很疯狂，我认为孩子不应该以这种方式伸出援手，并依赖于父母的结构。我明白了。相反，让组件添加一个sidenav会更好，但是sidenav必须属于sidenav容器，因此这仍然在组件的边界之外

---

那么，最好的策略是什么呢？我似乎无法理解它。您是否将其视为两个组件，需要两个外部插座，并且需要共享服务，以便它们可以相互通信？有更好的方法吗？

如果我理解正确：

只有“canvas”侧导航应该具有

如果“canvas”sidenav的数据依赖于任何其他组件，则需要将该逻辑提取到单独的服务中。这样，您的“canvas”sidenav就可以独立地从中获取数据

如果您的模板中仍然需要两个不同的出口，您应该使用，但是-如果您的主要内容区域（主页）是静态的-您不需要路线来显示它，只需使用模板中的“主页”组件，并将

仅保留在“画布”侧导航中即可

---

希望这有帮助

我更新了我的问题。那么，您会将我的

画布组件

拆分为两个组件吗<代码>画布组件和

画布组件信息

。那么我需要2个路由器插座？一个用于页面的主区域，一个用于侧导航？然后我需要一个服务，这样它们就可以相互通信了？1）不确定是否需要拆分画布组件。2） 如果你的模板需要两个不同的出口，你应该使用，但是如果你的主要内容区域（主页）是静态的-你不需要路线来显示它，只需使用模板中的“主页”组件，并将出口保持在你的“画布”侧导航中。顺便说一句，在您的示例中，1个

中仍然有2个

元素。每个都应该有自己的

包装器。据我所知，SideNav不应该嵌套。谢谢DotBot！我回家后会看一看，然后回来报到！一件事是你可以有2个侧导航，但不能超过2个。再次感谢@DotBot！Aux路由是我需要找到的兔子洞。我决定为我的每个画布实验创建一个模块。每个实验模块将有一个

CanvasComponent

，

InfoComponent

a

Service

，供他们交流。Aux将两个部件发送到各自的插座，它们可以通过服务进行通信。我真的很感激你的想法，因为我被困在寒冷中。听起来像是一个计划：）当然了@Clark！