Question

我开始学习编码，我的任务是建立一个个人的“投资组合”网站，该网站只有几页，展示了一些关于我的东西。我正在使用Angular构建它，并已经启动了2个版本的网站。我一直在用Bootstrap 4 / Jquery构建一个（跟随一个youtube视频），而我刚开始使用的另一个版本是Angular Material。（构建angular，因为招聘我的地方希望我学习angular，因为他们的大多数项目都涉及到框架）

我很乐意获得一些反馈，有关应该使用哪个框架来构建我的网站，以及以后会更有益。我一直感到沮丧的一件事是，我似乎无法“构建”我想要的东西，而不会每2分钟遇到一次精神障碍。

我刚刚看完了在Ang上youtube上6个小时的播放列表，我立即开始了这个网站项目，但是我很沮丧地把头发拔了出来。我知道一旦掌握了如何从一开始就顺利建立网站的诀窍--->完成我的生活将变得更加轻松。

我的问题是，每当我将其设置为将其推送为叠加时，如何从“材质”模式=“ push”制作此侧面导航。同样因为角度是基于分量的。我如何为其余部分去的主要内容区域制作一个组件？

这是我的“ main-nav.component.html”中的代码

<mat-sidenav-container class="sidenav-container">
  <mat-sidenav #drawer class="sidenav" fixedInViewport="true"
      [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
      [mode]="(isHandset$ | async) ? 'push' : 'push'"
      [opened]="!(isHandset$ | async)">
      <mat-toolbar color="primary" >
          <div class="sidebar-logo">Menu
           <!-- <img src = "/assets/roy-creates-logo-03-1.png" id="main-logo"> -->
        </div>
      </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>art-site</span>
    </mat-toolbar>
    <!-- Add Content Here -->
  </mat-sidenav-content>
</mat-sidenav-container>

和来自typescript类的相同组件的代码

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

@Component({
  selector: 'app-main-nav',
  templateUrl: './main-nav.component.html',
  styleUrls: ['./main-nav.component.css'],
})
export class MainNavComponent {

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

  constructor(private breakpointObserver: BreakpointObserver) {}

}

如何使用Material

0 个答案: