Question

我希望网站的一部分页面具有侧边栏导航。

因此，主页和其他页面将没有任何侧边栏，但是网站的一部分将具有侧边栏。在该部分，用户可以单击侧栏菜单项以导航到该部分中的不同页面。

这与Angular Material在其主要站点上使用的结构相同。

如果您转到home page，则没有侧边栏。但是，如果您转到components page，则会出现一个侧边栏，并且可以单击侧边栏菜单项在网站的组件部分中导航。

如何使用Angular Material的sidenav组件完成此结构？

以下是一些详细信息，以防万一：

文档说mat-sidebar用于在整个站点上添加一个侧栏，而mat-drawer仅用于一个部分，所以我假设我会使用mat-drawer。但是我找不到任何将边栏导航添加到一个部分的实现示例。棘手的部分是高效的代码，使我能够在给定的部分中浏览不同的路线。

基本代码如下：

html：

<mat-drawer-container class="example-container">
  <mat-drawer mode="side" opened>Drawer content</mat-drawer>
  <mat-drawer-content>Main content</mat-drawer-content>
</mat-drawer-container>

通常，您将其放在app.component.html中，然后在代码中“主要内容”位于<router-outlet></router-outlet>中。

如果侧边栏导航不应该用于整个站点的路由器出口，而应该是特定组件的路由，那么该怎么做？

Answer 1

在主<router-outlet></router-outlet>中放置一个app.component（周围有您想要的其他标记）

定义一些包含您的子节的路由（无论是否延迟加载）：

const routes: Routes = [
    { path: '', component: HomeComponent },
    { path: 'one', component: Page1Component },
    { path: 'two', component: Page2Component },
    {
        path: 'admin', component: AdminComponent, children: [
            { path: '', component: DashboardComponent },
            { path: 'dashboard', component: DashboardComponent },
            { path: 'users', component: UsersComponent }
        ]
    },
];

Home，Page1和Page2以及其他任何东西……只是普通的组件页面，没有侧边栏。

在AdminComponent中放入您的sidenav：

<h1>Admin</h1>
<mat-sidenav-container class="example-container">
    <mat-sidenav mode="side" opened>
        <mat-action-list>
                <mat-list-item [routerLink]="['dashboard']">Dashboard</mat-list-item>
                <mat-list-item [routerLink]="['users']">Users</mat-list-item>
        </mat-action-list>
    </mat-sidenav>
    <mat-sidenav-content><router-outlet></router-outlet></mat-sidenav-content>
</mat-sidenav-container>

只有在admin路线下，Sidenav才存在。

Answer 2

使用物料sidenav API，您可以根据需要在输入属性[opened]上使用变量来使其打开或关闭，如下所示：

<mat-sidenav-container class="example-container">
    <mat-sidenav mode="side" [opened]="boolean_var | async">Sidenav content</mat-sidenav>
    <mat-sidenav-content>

        <!-- Main content -->
        <router-outlet></router-outlet>

        <br>

        <button routerLink="/without" [state]="{ open: false }">
            Page Without Sidenav
        </button>

        <br>

        <button routerLink="/with" [state]="{ open: true }">
            Page with Sidenav
        </button>

     </mat-sidenav-content>
</mat-sidenav-container>

现在由您决定如何将变量与页面路由同步。

还有更多方法，例如，可以在路由上传递值：

const routes: Routes = [
  { path: 'with', component: WithSidenavComponent, data: { open : true } },
  { path: 'without', component: WithoutSidenavComponent , data: { open : false }},
];

并像这样设置您的根组件：

  ngOnInit() {
    this.boolean_var = this.router.events.pipe(
      filter(event => event instanceof NavigationEnd),
      map( (response: NavigationEnd) => this.router.config.find( conf => conf.path == response.url.slice(1) ).data.open || false )
    );
  }

角材料：仅在几页上添加sidenav？

2 个答案: