使用材质主题时组件未显示

Question

我不明白这里发生了什么。我有以下组件，

1) app.component 2）仪表板组件。 3) 登录组件 4) Home 组件（仪表板组件的子组件） 4) 头组件。

我面临的问题是，当我使用材质主题时，我无法查看子组件。

当我不使用材质主题时，我得到的输出是，

当我使用材料主题时，输出是，

我有自定义材质主题，定义如下，

@import '~@angular/material/theming';

@include mat-core();

$my-app-primary: mat-palette($mat-orange, 800,400,200);
$my-app-accent: mat-palette($mat-blue);
$my-app-warn: mat-palette($mat-red);

$my-app-theme: mat-light-theme($my-app-primary, $my-app-accent, $my-app-warn);


@include angular-material-theme($my-app-theme);

这里是代码，

app.component.html

<router-outlet></router-outlet>

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { RouterModule, Routes } from '@angular/router';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { AppComponent } from './app.component';
import { MatCompModule } from './mat-comp.module';
import { ParkingService } from '../serviceProviders/parkingService';
import { LoginService } from '../serviceProviders/loginservice';
import { LoginComponent } from '../layouts/login/login.component';
import { DashboardComponent } from '../layouts/dashboard/dashboard.component';
import { HomeComponent } from '../layouts/home/home.component';
import { HeaderComponent } from '../layouts/header/header.component';
import { MapComponent } from '../layouts/map/map.component';


const routes: Routes = [
  {path: 'login', component: LoginComponent},
  {path: '', redirectTo: '/login', pathMatch: 'full'},
  {path: 'dashboard', component: DashboardComponent,
children: [
  {path: 'home', component: HomeComponent},
  {path: 'map', component: MapComponent}
]}
];

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    DashboardComponent,
    HomeComponent,
    HeaderComponent,
    MapComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatCompModule,
    HttpClientModule,
    HttpModule,
    FormsModule,
    RouterModule.forRoot(routes)
  ],
  exports: [
    RouterModule
  ],
  providers: [LoginService, ParkingService],
  bootstrap: [AppComponent]
})
export class AppModule { }

header.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>
        <br/>
        <button (click)="onMapClicked()">Map</button>
        <br/>
        <button (click)="onHomeClicked()">Home</button>
    </mat-nav-list>
    </mat-sidenav>
  </mat-sidenav-container>
  </div>

header.component.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: []
})
export class HeaderComponent implements OnInit {

  constructor( private router: Router) { }

  ngOnInit() {
  }

  onDashboardClicked() {
   // this.router.navigate(['/applayout/dashboard']);
  }
  onMapClicked() {
    this.router.navigate(['/dashboard/map']);
  }
  onHomeClicked() {
    this.router.navigate(['/dashboard/home']);
  }

}

dashboard.component.html,

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

dashboard.component.ts ，

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: []
})
export class DashboardComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

home.component.ts,

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-dashboard',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

请帮帮我。

Answer 1

问题是你使用 mat-sidenav 而没有 mat-sidenav-content，你甚至可以检查你的 sidenav 是否占据了整个屏幕。

简单的解决方案是您不需要该标头组件。只需在您的仪表板组件中使用该标头组件代码，然后将该路由器插座放入您的仪表板组件 mat-sidenav-content 标记。

例子：

dashboard.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>
        <br/>
        <button (click)="onMapClicked()">Map</button>
        <br/>
        <button (click)="onHomeClicked()">Home</button>
   </mat-nav-list>
   </mat-sidenav>
   <mat-sidenav-content>
     <router-outlet></router-outlet>
   </mat-sidenav-content>
  </mat-sidenav-container>
 </div>

根据 header.component.ts 更改dashboard.component.ts