Добавление панели мониторинга в app.component

Question

У меня есть компонент входа в систему и компонент приложения. Когда пользователь входит в систему, отображается следующий вид:

Теперь пользователь может щелкнуть по кнопке бокового меню, чтобы получить другие подробности, такие как панель инструментов. Вот так

Когда мы нажимаем на приборную панель, компонент приборной панели должен отображаться вместе с кнопкой бокового меню и панелью инструментов.

Для кнопки бокового меню и панели инструментов у меня есть отдельный компонент, называемый applayout model.

applayoutmodel.component.html

<div class="page">
    <div>
    <mat-toolbar color="primary" class="toolbar">
    <div>
    <button class="menuButton" mat-icon-button (click)="sidenav.toggle()"><mat-icon>menu</mat-icon></button>
    <span class="companyName">Hello</span>
    </div>
    </mat-toolbar>
   </div>

    <mat-sidenav-container class="sideContainer" fullscreen  autosize style="top: 80px !important;">
      <mat-sidenav #sidenav mode="push" opened="false" class="sideNav">
        <mat-nav-list>
         <button (click)="onDashboardClicked()">Dashboard</button>
          <nav class="menuItems">
            <a routerLink="/login">Login</a>
          </nav>
      </mat-nav-list>
      </mat-sidenav>
    </mat-sidenav-container>
    </div>

applayoutmodel.component.ts

import { Component, OnInit } from '@angular/core';
import { Router, NavigationExtras, ActivatedRoute , Params } from '@angular/router';
import { LoginService } from '../../serviceProviders/loginservice';
import { LoginComponent } from '../pages/login/login.component';

@Component({
  selector: 'app-applayoutmodel',
  templateUrl: './applayoutmodel.component.html',
  styleUrls: ['./applayoutmodel.component.scss']
})
export class ApplayoutmodelComponent implements OnInit {
  user_id: string = undefined;
  constructor(
  private route: ActivatedRoute,
  private router: Router,
  private loginservice: LoginService) { }

  ngOnInit() {
  }

  onDashboardClicked() {
    this.router.navigate(['/dashboard']);
  }

}

app.component.html

<div *ngIf="showComponent">
<app-applayoutmodel></app-applayoutmodel>
</div>
<div>
<router-outlet></router-outlet>
</div>

app.component.ts

import { Component, Input, OnInit } from '@angular/core';
import { Router, NavigationExtras, ActivatedRoute , Params} from '@angular/router';
import * as globals from '../app/pages/models/myGlobals';
import { LoginService } from '../serviceProviders/loginservice';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  title = 'app';
  showComponent = false;

  constructor(
    private route: ActivatedRoute,
    private router: Router,
    private loginservice: LoginService ) {}

    ngOnInit() {
      console.log(this.router.url);
      if ( this.router.url !== '/') {
        this.showComponent = true;
      }
      console.log(this.showComponent);
    }
}

и модуль маршрутизации как

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';
import { LoginComponent } from './pages/login/login.component';
import { AppComponent } from './app.component';
import { DashboardComponent } from '../app/pages/dashboard/dashboard.component';

const routes: Routes = [
  {path: 'login', component: LoginComponent},
  {path: '', redirectTo: '/login', pathMatch: 'full'},
  {path: 'dashboard', component: DashboardComponent },
  {path: 'applayout', component: AppComponent}
];
@NgModule({
  imports: [
    CommonModule,
    RouterModule.forRoot(routes)
  ],
  exports: [
    RouterModule
  ],
  declarations: []
})
export class AppRoutingModule { }

Выход, на который я надеюсь, будет

Answer 1

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

const routes: Routes = [
  {path: 'login', component: LoginComponent},
  {path: '', redirectTo: '/login', pathMatch: 'full'},
  {path: 'applayout', component: AppComponent, children:[
     {path: 'dashboard', component: DashboardComponent }
  ]}
];

Компонент приложения будет содержать верхнюю панель навигации. После перехода на панель мониторинга компонент панели будет отображаться внутри компонента приложения. Следовательно, панель навигации будет присутствовать на странице панели инструментов, как показано на рисунке выше. Маршрут к приборной панели будет applayout/dashboard.

Answer 2

Похоже, вы напрямую передали opened="false" в mat-sidebar, что в итоге будет держать боковую панель в закрытом состоянии. Даже если переключение showComponent не изменит состояние боковой панели.

В этом случае я бы предложил вам добавить showComponent, как при @Input привязке к AppLayoutModel компоненту, и использовать его для переключения opened состояния mat-sidebar компонента. Также измените флаг showComponent на showSidebar.

app.component.html

import { Component, OnInit } from '@angular/core';
import { Router, NavigationExtras, ActivatedRoute , Params } from '@angular/router';
import { LoginService } from '../../serviceProviders/loginservice';
import { LoginComponent } from '../pages/login/login.component';

@Component({
  selector: 'app-applayoutmodel',
  ...
})
export class ApplayoutmodelComponent implements OnInit {
  user_id: string = undefined;
  constructor(
  private route: ActivatedRoute,
  private router: Router,
  private loginservice: LoginService) { }
  @Input() showSidebar: boolean;
  ....
}

Html

<mat-sidenav-container class="sideContainer" fullscreen  autosize style="top: 80px !important;">
  <mat-sidenav #sidenav mode="push" [opened]="showSidebar" class="sideNav">
    .....
  </mat-sidenav>
</mat-sidenav-container>