Я не понимаю, что здесь происходит. У меня есть следующие компоненты,
1) app.component
2) Компонент панели приборов.
3) компонент входа
4) Домашний компонент (дочерний компонент панели инструментов)
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() {
}
}
Пожалуйста, помогите мне.