使用材料主题时组件未显示
[英] Component not getting displayed while using material theme
本文介绍了使用材料主题时组件未显示的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我不明白这里发生了什么.我有以下组件，
1) app.component2) 仪表板组件.3) 登录组件4) Home 组件(仪表板组件的子组件)4) 头部组件.
我面临的问题是，当我使用材料主题时，我无法查看子组件.
当我不使用材料主题时，我得到的输出是，
当我使用 material theme 时，输出是，
我有自定义材质主题，其定义如下，
@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.module.ts
import { BrowserModule } from '@angular/platform-browser';从'@angular/core' 导入 { NgModule };从@angular/platform-browser/animations"导入 { BrowserAnimationsModule };从@angular/router"导入 { RouterModule, Routes };从@angular/forms"导入 { FormsModule, ReactiveFormsModule };从'@angular/http'导入{HttpModule}；从@angular/common/http"导入 { HttpClientModule, HttpClient };从 './app.component' 导入 { AppComponent };import { MatCompModule } from './mat-comp.module';从'../serviceProviders/parkingService'导入{停车服务}；从'../serviceProviders/loginservice'导入{登录服务}；import { LoginComponent } from '../layouts/login/login.component';从'../layouts/dashboard/dashboard.component'导入{仪表板组件}；从 '../layouts/home/home.component' 导入 { HomeComponent };从 '../layouts/header/header.component' 导入 { HeaderComponent };从 '../layouts/map/map.component' 导入 { MapComponent };const 路由:路由 = [{路径:'登录'，组件:登录组件}，{path: '', redirectTo: '/login', pathMatch: 'full'},{路径:'仪表板'，组件:仪表板组件，孩子们: [{path: 'home', 组件: HomeComponent},{路径:'地图'，组件:地图组件}]}];@NgModule({声明: [应用组件，登录组件，仪表板组件，主页组件，标题组件，地图组件],进口:[浏览器模块，浏览器动画模块，MatComp模块，HttpClient 模块，Http模块，表单模块，RouterModule.forRoot(路由)],出口:[路由器模块],提供者:[登录服务，停车服务]，引导程序:[AppComponent]})导出类 AppModule { }
header.component.html
<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">你好</span>
</mat-toolbar>
<mat-sidenav-container class="sideContainer" fullscreen autosize style="top: 80px !important;"><mat-sidenav #sidenav mode="push" opens="false" class="sideNav"><mat-nav-list><button (click)="onDashboardClicked()">仪表板</button><nav class="menuItems"><a routerLink="/login">登录</a></nav><br/><button (click)="onMapClicked()">地图</button><br/><button (click)="onHomeClicked()">Home</button></mat-nav-list></mat-sidenav></mat-sidenav-container>
header.component.ts
import { Component, OnInit } from '@angular/core';从@angular/router"导入{路由器}；@成分({选择器:'应用程序头'，templateUrl: './header.component.html',样式网址:[]})导出类 HeaderComponent 实现 OnInit {构造函数(私有路由器:路由器){}ngOnInit() {}onDashboardClicked() {//this.router.navigate(['/appplayout/dashboard']);}onMapClicked() {this.router.navigate(['/dashboard/map']);}onHomeClicked() {this.router.navigate(['/dashboard/home']);}}
dashboard.component.html,
<路由器插座></路由器插座>
dashboard.component.ts ,
import { Component, OnInit } from '@angular/core';@成分({选择器:应用仪表板"，templateUrl: './dashboard.component.html',样式网址:[]})导出类 DashboardComponent 实现 OnInit {构造函数(){}ngOnInit() {}}
home.component.ts,
import { Component, OnInit } from '@angular/core';@成分({选择器:应用仪表板"，templateUrl: './home.component.html',styleUrls: ['./home.component.scss']})导出类 HomeComponent 实现 OnInit {构造函数(){}ngOnInit() {}}
请帮帮我.
解决方案
问题是您使用的 mat-sidenav 没有 mat-sidenav-content，您甚至可以检查您的 sidenav 是否占据了整个屏幕.
简单的解决方案是您不需要该标题组件.只需在您的仪表板组件中使用该标头组件代码，然后将该路由器插座置于您的仪表板组件 mat-sidenav-content 标签中即可.
示例:
<块引用>
dashboard.component.html
<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">你好</span>
</mat-toolbar>
<mat-sidenav-container class="sideContainer" fullscreen autosize style="top: 80px !important;"><mat-sidenav #sidenav mode="push" opens="false" class="sideNav"><mat-nav-list><button (click)="onDashboardClicked()">仪表板</button><nav class="menuItems"><a routerLink="/login">登录</a></nav><br/><button (click)="onMapClicked()">地图</button><br/><button (click)="onHomeClicked()">Home</button></mat-nav-list></mat-sidenav><mat-sidenav-content><路由器插座></路由器插座></mat-sidenav-content></mat-sidenav-container>
根据 header.component.ts 更改dashboard.component.ts
I am not getting what is happening here. I have following components,
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 ,
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);
And here are the codes,
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() {
}
}
Please help me.
解决方案
The problem is you are using mat-sidenav without mat-sidenav-content, you can even check that your sidenav is taking the whole screen.
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.
Example:
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>
change the dashboard.component.ts as per the header.component.ts
这篇关于使用材料主题时组件未显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
