Question

我正在编写一个可扩展的角度应用程序。您会注意到，我正在使用角度材质。我正在使用模块将应用程序分成不同的部分。导航栏和页脚是主要的核心布局组件。它们仅在通过身份验证时更改。

应用程序的主要区域将使用模块填充。我的app.component.html中的结构如下所示：

app.component.html

<div class="page-wrap">
  <router-outlet name="navbar"></router-outlet>

  <main class="main">
    <router-outlet class="outlet"></router-outlet>
  </main>

  <!-- <app-google-map-embed type='place'></app-google-map-embed> -->

  <footer>
        <app-footer></app-footer>
  </footer>
</div>

在导航栏中，我有一个菜单按钮，可以打开sidenav。

navbar.component.html

<mat-toolbar color="primary">
  <mat-toolbar-row>
    <button mat-icon-button (click)="sidenav.toggle()">
      <mat-icon class="navbar-icon">menu</mat-icon>
    </button>
    <span class="app-name">app-name</span>
    <span class="navbar-spacer"></span>
   </mat-toolbar-row>
</mat-toolbar>

在每个模块中，我都有一个sidenav。目的是将sidenav用作应用程序中每个模块的导航。因此，每个模块都是唯一的，但模块之间是不同的。

moduleA.component.html

<div class="router-container">
  <button mat-icon-button (click)="sidenav.toggle()">
    <mat-icon class="navbar-icon">menu</mat-icon>
  </button>

  <mat-sidenav-container>
    <mat-sidenav #sidenav  mode="side" [(opened)]="opened"
             role="navigation">
             <moduleA-sidebar></moduleA-sidebar>
    </mat-sidenav>

    <div class="component-content">
      <p>Insert router and redirect to moduleA content!</p>
    </div>

  </mat-sidenav-container>
</div>

我知道这是一个范围问题。如果在我的app.component.html中我不会使用路由器，则可以按照Call sidenav component from toolbar component in angular-material2中的说明将sidenav导入为输入。由于使用了路由器插座，我认为我需要采用一种完全不同的方法。

您能确认通过路由器出口传递@输入变量不可行吗？我应该看《 Obersables》还是《 Events》？

边注：我希望主路由器的高度最小化为导航栏和页脚之间的空白。有人知道该怎么做吗？由于路由器插座，我再次陷入困境。.他们把我杀死了;-）

Angular-从导航栏都在路由器出口后面调用侧边栏

0 个答案: