Как создать область «Основное содержимое» в угловых с sidenav, используя материал - PullRequest
Новая
       19

Как создать область «Основное содержимое» в угловых с sidenav, используя материал

0 голосов
/ 20 ноября 2018

Я начинаю изучать кодирование, и мне было поручено создать личный «портфолио» веб-сайт, который состоит из нескольких страниц и демонстрирует некоторые вещи обо мне.Я строю его с Angular и запустил 2 версии сайта.Один, который я строил с Bootstrap 4 / Jquery (после видео на YouTube), а другая версия, которую я только начал, - с Angular Material.framework)

Я хотел бы получить некоторые отзывы о том, какую платформу я должен использовать для создания своего веб-сайта, а какая будет более полезной в дальнейшем.Одна вещь, которая меня расстраивает, это то, что я не могу «построить» то, что хочу, не наталкиваясь на ментальные блоки каждые 2 минуты.

Я только что закончил просмотр 6-часового плейлиста на YouTube под угловым углом, и я сразу же начал работу над этим проектом на веб-сайте, но я расстроился.Я знаю, как только я пойму, как с самого начала гладко построить веб-сайт ---> закончить, моя жизнь станет немного легче.

Мой вопрос: как мне сделать эту навигацию в режиме материала ="нажимай" каждый раз, когда я устанавливаю его, чтобы толкать его, все еще накладывается.Кроме того, потому что угловой является компонентным.Как сделать компонент для основной области содержимого, куда направляются остальные компоненты?

Вот код из моего "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>

икод из класса машинописи для того же компонента 

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) {}

}
...