使用材质主题时组件未显示 [英] Component not getting displayed while using material theme
问题描述
我不明白这里发生了什么.我有以下组件，
I am not getting what is happening here. I have following components,
1)应用程序组件 2)仪表板组件. 3)登录组件 4)主页组件(仪表板组件的子组件) 4)Heade组件.
1) app.component 2) Dashboard component. 3) Login component 4) Home component ( child of dashboard component) 4) heade component.
我面临的问题是，当我使用材质主题时，我无法查看子组件.
The problem I am facing is, when I use material theme, I am not able to view child component.
当我不使用素材主题时，我得到的输出是，
When I dont use material theme, the output I am getting is ,
当我使用Material主题时，输出为
and When I use material theme , the output is,
我有如下定义的自定义材料主题，
I have custom material theme which is defined as follows,
@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
app.component.html
<router-outlet></router-outlet>
app.module.ts
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
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
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，
dashboard.component.html,
<app-header></app-header>
<router-outlet></router-outlet>
dashboard.component.ts，
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，
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() {
}
}
请帮助我.
推荐答案
问题是您正在使用不带mat-sidenav-content的mat-sidenav，甚至可以检查您的sidenav是否占据了整个屏幕.
The problem is you are using mat-sidenav without mat-sidenav-content, you can even check that your sidenav is taking the whole screen.
简单的解决方案是您不需要该标头组件.只需在仪表板组件中使用标头组件代码，然后将路由器插座插入仪表板componenet mat-sidenav-content标签即可.
The simple solution is you don't need that header component. Simply use that header component code in your dashboard component and put that router-outlet insdie your dashboard componenet mat-sidenav-content tag.
示例:
dashboard.component.html
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
change the dashboard.component.ts as per the header.component.ts
这篇关于使用材质主题时组件未显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
