angular - 单击按钮时在路由时隐藏卡片

Question

我的用户模块有 5 个组件： 1.user-dashboard

这些是用户仪表板的子组件

2.user-history 3.user-result 4.user-start-quiz 5.user-upcoming-quizzes

我想在每个组件上显示一个菜单。

一、user-dashboard组件加载

使用仪表板页面

我想在用户单击按钮时隐藏仪表板卡片，但它在卡片下方显示“当前测验”。

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,

]

标签： angularangular2-routingmean-stackangular6angular4-router