Угловой материал сиденав с flex-layout - не умеет перенаправлять на разные страницы - PullRequest
Новая
       12

Угловой материал сиденав с flex-layout - не умеет перенаправлять на разные страницы

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

Нужна помощь в том, как перенаправлять на разные страницы, когда я нажимаю на гиперссылки (когда браузер имеет полное окно, а не полное окно, это означает меню в правом верхнем углу).

Создано Этот стек стека .

Нужно ли мне использовать mat-sidenav-content fxFlexFill и указать высоту mat-sidenav-container 

.mat-sidenav-container{
  background-color: lightskyblue;
  min-height: 93vh !important;
}

<div> 
  <mat-toolbar color="primary">
    <div fxShow="true" fxHide.gt-sm="true">
      <button mat-icon-button (click)="sidenav.toggle()">
        <mat-icon>menu</mat-icon>
      </button>
    </div>

    <a mat-button class="companyName" routerLink="/">
      <span>Site name</span>
    </a>
    <span class="example-spacer"></span>
    <div fxShow="true" fxHide.lt-md="true">
      <a mat-button routerLink="/about">About us</a>
      <a mat-button routerLink="/prices">Prices</a>
      <a mat-button routerLink="/start-page">Start page</a>
      <a mat-button routerLink="/offer">Offer</a>
      <a mat-button routerLink="/contact">Contact</a>
    </div>

  </mat-toolbar>
  <mat-sidenav-container fxFlexFill class="example-container">

    <mat-sidenav color="primary" #sidenav fxLayout="column" mode="over"  opened="false" fxHide.gt-sm="true">
      <div fxLayout="column">
        <a mat-button routerLink="/about">About us..</a>
        <a mat-button routerLink="/prices">Prices</a>
        <a mat-button routerLink="/start-page">Start page</a>
        <a mat-button routerLink="/offer">Offer</a>
        <a mat-button routerLink="/contact">Contact</a>
      </div>
    </mat-sidenav>
    <mat-sidenav-content fxFlexFill>
      Awesome content
    </mat-sidenav-content>
  </mat-sidenav-container>
</div>

1 Ответ

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

Ваша проблема на самом деле не проблема.Причина, по которой вы не видите работу маршрутизатора, заключается в том, что вы визуализируете элемент поверх вашей розетки маршрутизатора 

<div> 
  <mat-toolbar color="primary">
    <div fxShow="true" fxHide.gt-sm="true">
      <button mat-icon-button (click)="sidenav.toggle()">
        <mat-icon>menu</mat-icon>
      </button>
    </div>

    <a mat-button class="companyName" routerLink="/">
      <span>Site name</span>
    </a>
    <span class="example-spacer"></span>
    <div fxShow="true" fxHide.lt-md="true">
      <a mat-button routerLink="/about">About us</a>
      <a mat-button routerLink="/prices">Prices</a>
      <a mat-button routerLink="/start-page">Start page</a>
      <a mat-button routerLink="/offer">Offer</a>
      <a mat-button routerLink="/contact">Contact</a>
    </div>

  </mat-toolbar>
  <mat-sidenav-container fxFlexFill class="example-container">

    <mat-sidenav color="primary" #sidenav fxLayout="column" mode="over"  opened="false" fxHide.gt-sm="true">
      <div fxLayout="column">
        <a mat-button routerLink="/about">About us..</a>
        <a mat-button routerLink="/prices">Prices</a>
        <a mat-button routerLink="/start-page">Start page</a>
        <a mat-button routerLink="/offer">Offer</a>
        <a mat-button routerLink="/contact">Contact</a>
      </div>
    </mat-sidenav>
    <mat-sidenav-content fxFlexFill>
      Awesome content // <-- RIGHT HERE should be router outlet, this is what is displayed as the main 'content'
    </mat-sidenav-content>
  </mat-sidenav-container>
</div>

, поэтому измените 

<mat-sidenav-content fxFlexFill>
   Awesome content
</mat-sidenav-content>

на 

<mat-sidenav-content fxFlexFill>
  <router-outlet></router-outlet>
</mat-sidenav-content>
...