将仪表板添加到 app.component

Question

我有登录组件和应用程序组件。当用户登录时，会显示如下视图，

现在用户可以单击侧导航菜单按钮来获取其他详细信息，例如仪表板。像这样，

当我们点击仪表板时，仪表板组件应该与侧面菜单按钮和工具栏一起显示。

对于侧边菜单按钮和工具栏，我有一个单独的组件，称为 applayout 模型。

appayoutmodel.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>

appayoutmodel.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

看起来，您直接将opened="false" 传递给mat-sidebar，最终将侧边栏保持在关闭状态。即使切换showComponent 不会改变侧边栏的状态。

在这种情况下，我建议您将showComponent 添加到@Input 绑定到AppLayoutModel 组件中，并使用相同的方法来切换opened 组件的opened 状态。还将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>

Answer 2

登录后，将所有其他路由视为应用组件的子级。 因此，您的路线将如下所示，

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

应用组件将包含顶部导航栏。导航到仪表板后，仪表板组件将在应用程序组件内呈现。因此，导航栏将出现在仪表板页面中，如上图所示。 到仪表板的路由是applayout/dashboard。