Question

我有一个标准的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用作内容区域。

在这个项目中，所有活动路径都只是具有Canvas Region的Components和一些关于“Experiment”的基本信息。也许是一些基本形式的滑块或控件。

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

基本上我希望内容div进入第二个sidenav容器。只有Canvas是视觉上实际组件的子项。

<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>

这看起来很疯狂，我不认为孩子应该以这种方式接触并取决于父母的结构。我明白了。使用Component添加sidenav的反过来会好得多，但sidenav必须属于sidenav容器，所以这仍然在组件的边界之外。

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

Answer 1

如果我理解正确：

只有“canvas”sidenav应该有<router-outlet>。
如果“canvas”sidenav依赖于其数据的任何其他组件，则需要将该逻辑提取到单独的服务中。通过这种方式，您的“画布”sidenav可以独立地从中获取数据。
如果你的模板中仍然需要2个不同的插座，你应该使用aux routing，但是如果你的主要内容区域（主页）是静态的 - 你不需要显示它的路线，只需使用模板中的“home”组件，仅将<router-outlet>保留在“canvas”sidenav

希望这有帮助！

Angular Material SideNav内容策略

1 个答案: