我的用户模块包含5个组件： 1.用户仪表板
这些是用户仪表板的子组件
2。用户历史记录 3.用户结果 4.用户启动测验 5.user-upcoming测验
我想在每个组件上显示一个菜单。
首先，用户仪表板组件加载
我想在用户单击按钮时隐藏仪表板卡，但在卡下方显示“当前测验”。
pagenotfound.html
<!--
navigation
-->
<mdb-navbar SideClass="navbar fixed-top navbar-expand-lg navbar-dark mdb-color scrolling-navbar " [containerInside]="false" >
<mdb-navbar-brand>
<a class="logo navbar-brand" href="#"><strong>Navbar</strong></a>
</mdb-navbar-brand>
<links>
<ul class="navbar-nav ml-auto">
<li class="nav-item active waves-light" >
<a routerLink="../dashboard" class="nav-link">Dashboard<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item waves-light" >
<a [routerLink]="" routerLinkActive="active" class="nav-link" (click)="logout()">Logout</a>
</li>
</ul>
</links>
</mdb-navbar>
<!--
header image
-->
<div class="row">
<div class="col-sm-12 col-md-12">
<div id="box1" style="background-image:url(assets/images/dashboard.jpg) ;
height: 50vh;width: 100%;background-size: cover;display: table;background-attachment: fixed;" class="img-responsive">
<br><br>
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4">
<div class="box text-center" style="text-align: center">
Hey Welcome !
</div>
<div class="word text-center">
<span>{{userName}}</span>
<span>{{userName}}</span>
<span>{{userName}}</span>
<span>{{userName}}</span>
</div>
</div>
<div class="col-md-4">
</div>
</div>
</div>
</div>
</div>
<!--
body
-->
<br><br><br>
<!--cards for user dashboards-->
<div class="container">
<div class="row">
<div class=" col-md-3">
<mat-card class="dashboard-cards" style="box-shadow:3px 3px 5px 6px #ccc;" >
<mat-card-content>
<div class="pic">
<img src="assets/images/currentQuiz.jpg" alt="Photo of a Shiba Inu">
</div>
<div class="action">
<button routerLink="currentQuizzes" routerLinkActive="active" class="btn btn-outline-info btn-lg">Current Quizzes</button>
</div>
<ul class="bottom-space">
<li><a href="#"></a></li>
<li><a href="#" ></a></li>
<li><a href="#" ></a></li>
</ul>
</mat-card-content>
</mat-card>
</div>
<div class=" col-md-3">
<mat-card class="dashboard-cards" style="box-shadow:3px 3px 5px 6px #ccc;" >
<mat-card-content>
<div class="pic">
<img src="assets/images/upcomingQuiz.jpg" alt="Photo of a Shiba Inu">
</div>
<div class="action">
<button routerLink="upcomingQuizzes" routerLinkActive="active" class="btn btn-outline-info btn-lg">Upcoming Quizzes</button>
</div>
<ul class="bottom-space">
<li><a href="#"></a></li>
<li><a href="#" ></a></li>
<li><a href="#" ></a></li>
</ul>
</mat-card-content>
</mat-card>
</div>
<div class=" col-md-3 ">
<mat-card class="dashboard-cards" style="box-shadow:3px 3px 5px 6px #ccc;" >
<mat-card-content>
<div class="pic">
<img src="assets/images/history.jpg" alt="Photo of a Shiba Inu">
</div>
<div class="action">
<button routerLink="history" routerLinkActive="active" class="btn btn-outline-info btn-lg">History</button>
</div>
<br>
<ul class="bottom-space">
<li><a href="#"></a></li>
<li><a href="#" ></a></li>
<li><a href="#" ></a></li>
</ul>
</mat-card-content>
</mat-card>
</div>
<div class=" col-md-3 ">
<mat-card class="dashboard-cards" style="box-shadow:3px 3px 5px 6px #ccc;" >
<mat-card-content>
<div class="pic">
<img src="assets/images/ChangePassword.png" alt="Photo of a Shiba Inu">
</div>
<div class="action">
<button class="btn btn-outline-info btn-lg">Change Password</button>
</div>
<ul class="bottom-space">
<li><a href="#"></a></li>
<li><a href="#" ></a></li>
<li><a href="#" ></a></li>
</ul>
</mat-card-content>
</mat-card>
</div>
</div>
</div>
<!--
footer
-->
<br><br><br>
<router-outlet></router-outlet>
如何在路由时隐藏仪表板卡，但需要菜单/导航...？
在卡片下方定义
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
/*
all components of user module
*/
import { UserDashboardComponent } from './user-dashboard/user-dashboard.component';
import { UserCurrentQuizzesComponent } from './user-current-quizzes/user-current-quizzes.component';
import { UserUpcomingQuizzesComponent } from './user-upcoming-quizzes/user-upcoming-quizzes.component';
import { UserHistoryComponent } from './user-history/user-history.component';
import { UserResultComponent } from './user-result/user-result.component';
import { UserStartQuizComponent } from './user-start-quiz/user-start-quiz.component';
const routes: Routes = [
{
path:'',
redirectTo:'dashboard',
pathMatch:'full'
},
{
path:'dashboard',
component:UserDashboardComponent,
children:[
{
path:'currentQuizzes',
component:UserCurrentQuizzesComponent,
children:[
{
path:'startQuiz',
component:UserStartQuizComponent,
},
],
},
{
path:'upcomingQuizzes',
component:UserUpcomingQuizzesComponent,
},
{
path:'result',
component:UserResultComponent,
},
{
path:'history',
component:UserHistoryComponent,
},
]
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class UserRoutingModule { }
export const userRoutingComponents=[
UserDashboardComponent,
UserCurrentQuizzesComponent,
UserUpcomingQuizzesComponent,
UserHistoryComponent,
UserResultComponent,
UserStartQuizComponent,
]