0

我也在 Github @angular/components Issues 中问过这个问题，上面有截图。

你想做什么？

我正在尝试编写一个 Sidenav 骨架演示，就像官方文档https://material.angular.io/导航骨架（左侧的菜单和右侧的内容正文，带有概览\api\examples 选项卡）。

而且我是 Angular 的新手，我不知道如何编写这个 Sidenav 骨架，并且在克隆这个 repo 后我找不到关于这个骨架的相关源代码。

如果有人可以帮助我，我将不胜感激。

您尝试了哪些故障排除步骤？

我已经阅读了Sidenav Document，但仍然不明白。

因为根据这个文档，我需要对 Sidenav 进行如下编码，但是在官方 Sidenav 骨架中，它是类docs-component-viewer-nav-content ng-tns-c139-5而不是mat-drawer-inner-container ng-tns-c36-0：

<mat-sidenav-container class="example-container" *ngIf="shouldRun">
  <mat-sidenav mode="side" opened>Sidenav content</mat-sidenav>
  <mat-sidenav-content>Main content</mat-sidenav-content>
</mat-sidenav-container>

再生产

如上，我使用了mat-sidenav-containertag但不知道如何实现官网的sidenav风格一一。

环境

  • 角度：~9.1.0
  • CDK/材料：^9.2.0
  • 浏览器：Chrome
  • 操作系统（例如 Windows、macOS、Ubuntu）：macOS
4

3 回答 3

2

这是 stackblitz示例- https://stackblitz.com/edit/angular-material-drawer

角边导航菜单的结构

<button mat-icon-button (click)="sidenav.toggle()">

mat-drawer-container和mat-drawer很重要

<mat-drawer-container fullscreen>
    <mat-drawer #sidenav mode="side" opened="true" role="navigation" style="background-color:#3c3f4e;">
      <ng-container>
          <mat-label>Test</mat-label>
      </ng-container>
    </mat-drawer>
    <mat-drawer-content role="region">
      <router-outlet></router-outlet>
    </mat-drawer-content>
  </mat-drawer-container>
于 2020-04-24T09:58:21.627 回答
0

我最近在 youtube 上创建了一个视频教程，逐步解决了这个问题。在这里查看：

https://www.youtube.com/watch?v=XwNwtTeml3c

谢谢，利维

于 2020-05-03T20:13:01.853 回答
0

从文档 中，您可以使用示意图生成完整的导航并根据需要调整行为和方面。

ng generate @angular/material:table <component-name>

上面的命令将创建一个完全响应的导航组件，并将导入必要的模块。

如果你想手动完成，你可以看到下面的例子（基本上上面的命令会生成什么）：

HTML 模板：

<mat-sidenav-container class="sidenav-container">
  <mat-sidenav
    #drawer
    class="sidenav"
    fixedInViewport
    [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
    [mode]="(isHandset$ | async) ? 'over' : 'side'"
    [opened]="(isHandset$ | async) === false"
  >
    <mat-toolbar>Menu</mat-toolbar>
    <mat-nav-list>
      <a mat-list-item href="#">Link 1</a>
      <a mat-list-item href="#">Link 2</a>
      <a mat-list-item href="#">Link 3</a>
    </mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content>
    <mat-toolbar color="primary">
      <button
        type="button"
        aria-label="Toggle sidenav"
        mat-icon-button
        (click)="drawer.toggle()"
        *ngIf="isHandset$ | async"
      >
        <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
      </button>
      <span>blog</span>
    </mat-toolbar>
    <!-- Add Content Here -->
    <ng-content></ng-content>
  </mat-sidenav-content>
</mat-sidenav-container>

打字稿文件

import { Component } from '@angular/core';
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
import { Observable } from 'rxjs';
import { map, shareReplay } from 'rxjs/operators';

@Component({
  selector: 'it-nav-example',
  templateUrl: './nav-example.component.html',
  styleUrls: ['./nav-example.component.scss']
})
export class NavExampleComponent {

  isHandset$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Handset)
    .pipe(
      map(result => result.matches),
      shareReplay()
    );

  constructor(private breakpointObserver: BreakpointObserver) {}

}

CSS 文件

.sidenav-container {
  height: 100%;
}

.sidenav {
  width: 200px;
}

.sidenav .mat-toolbar {
  background: inherit;
}

.mat-toolbar.mat-primary {
  position: sticky;
  top: 0;
  z-index: 1;
}

无论您选择如何创建导航，请确保将您的路线放置在根组件的 nav 组件中，如下所示：

app.component.html

<app-nav-example>
  <router-outlet></router-outlet>
</app-nav-example>
于 2020-04-24T10:17:21.430 回答