Как отобразить мой компонент рядом с боковой панелью при щелчке меню из боковой навигации в angular 8 и angular материалах

Я работаю над Angular 8 и материалом Angular, но я застрял в точке, где я хочу отображать свой контент или (компонент) рядом с sidenav, т.е. это главный экран, когда нажимается любая ссылка из бокового меню. Вот фрагмент моего кода

Ссылка на stackblitz My_link

У меня есть 3 компонента, кроме компонента приложения

  1. Компонент заголовка
  2. Компонент боковой панели
  3. Компонент LinkContent

SidebarCompoment.html

<div style="height: 100vh;">
<mat-sidenav-container>
    <mat-sidenav #sidenav>
    <!--   # [(opened)]="opened" mode="side" (opened)="log('Opened')" 
      (closed)="log('Closed')" --> 
    <div class="dropdown">  
    <button  [matMenuTriggerFor]="animals"  class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Animal index</button>
 </div>

    <mat-menu #animals="matMenu">
      <button mat-menu-item [matMenuTriggerFor]="vertebrates" (click)="setflag()"><a [routerLink]="'/link1'">Vertebrates</a></button>
      <button mat-menu-item [matMenuTriggerFor]="invertebrates">Invertebrates</button>
    </mat-menu>
   </mat-sidenav>  
  <mat-sidenav-content>
      <button  class="fa fa-list fa-2x" (click)="sidenav.toggle()"></button>
 </mat-sidenav-content>
 </mat-sidenav-container>
</div>

SidebarComponent.css

mat-sidenav-container {
height: 100vh;
background-color: white;

  }

  mat-sidenav, mat-sidenav-content {
    padding: 16px;

  }

  mat-sidenav {
    background-color: black;
    width: 300px;
  }

app-routing.module.ts

const routes: Routes = [

  { path: '', component: AppComponent},
  { path: 'link1', component: LinkContentComponent},
  { path: 'link2', component: LinkContentComponent}

];

app.component.html


<app-header></app-header>
<app-sidebar></app-sidebar>
<router-outlet></router-outlet>

Также я предоставляю ссылку на Stackblitz-link

Экран Myoutput

Итак, вот мой вопрос: когда я нажимаю любую ссылку из бокового меню, я хочу загрузить компонент LinkContent на главном экране рядом с боковым меню и чуть ниже заголовка. Итак, как мне это сделать. Прямо сейчас, когда я нажимаю ссылку на компонент загружается под компонентом боковой панели, как показано на рисунке. Любая помощь будет принята с благодарностью.

Это результат, который я получаю


angular angular8 sidebar angular-material mat-sidenav
person tyler    schedule 21.12.2019    source источник
comment
просто предложение: если вы создадите пример на stackblitz.com, вам будет легче помочь (и определенно более точно ).   -  person Mohammad Hassany    schedule 21.12.2019
comment
Я добавил ссылку на stackBlitz   -  person tyler    schedule 21.12.2019

Ответы (2)


arrow_upward
1
arrow_downward

Когда я пошел к вам Ссылка на stackblitz, я вижу, что у вас есть выход маршрутизатора в app.component.html. Итак, что вы можете сделать, это добавить выход вашего маршрутизатора в sidebar.component.html, как это

Sidebar.component.html

<div style="height: 100vh;">
<mat-sidenav-container>
    <mat-sidenav #sidenav>
    <!--   # [(opened)]="opened" mode="side" (opened)="log('Opened')" 
      (closed)="log('Closed')" --> 
    <div class="dropdown">  
    <button  [matMenuTriggerFor]="animals"  class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Animal index</button>
 </div>

    <mat-menu #animals="matMenu">
      <button mat-menu-item [matMenuTriggerFor]="vertebrates" (click)="setflag()"><a [routerLink]="'/link1'">Vertebrates</a></button>
      <button mat-menu-item [matMenuTriggerFor]="invertebrates">Invertebrates</button>
    </mat-menu>
   </mat-sidenav>  
  <mat-sidenav-content>

<!-- Adding router-outtlet here        -->

<router-outlet></router-outlet>

      <button  class="fa fa-list fa-2x" (click)="sidenav.toggle()"></button>
 </mat-sidenav-content>
 </mat-sidenav-container>
</div>
person Mehul Kothari    schedule 22.12.2019

arrow_upward
-2
arrow_downward

Глядя на ваш код, я думаю, вам нужно вернуться к документации. https://material.angular.io/components/sidenav/overview

person Mohammad Hassany    schedule 21.12.2019
comment
Если вы можете мне помочь, это будет здорово, потому что я новичок - person tyler; 22.12.2019