嵌套路由在angular6路由中不起作用

时间：2019-06-05 10:23:54

标签： angular6

我正在用angular6做项目，我在这里实现路由概念。我希望以登录->导航栏-> reportCard->视图的方式进行路由。直到reportCard路由正常工作，但对于视图路由却不起作用。它将显示错误，例如无法匹配任何路由。我在这里创建了3个路由文件。第一个是app.routing.module.ts，第二个是navbar.routing.module.ts，第三个是report-card.routong.module.ts。请任何人帮我解决这个问题

这是我的代码

app.module.ts 

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { SidenavRoutingModule } from './sidenav/sidenav-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { SidenavComponent } from './sidenav/sidenav.component';
import { LayoutModule } from '@angular/cdk/layout';
import { MatToolbarModule, MatButtonModule, MatSidenavModule ,MatIconModule,MatCheckboxModule, MatListModule,MatCardModule,MatGridListModule,MatFormFieldModule,MatOptionModule,MatSelectModule,MatInputModule,MatMenuModule } from '@angular/material';
import { LoginComponent } from './login/login.component';
import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './footer/footer.component';
import { FormsModule, ReactiveFormsModule  } from "@angular/forms";
import { ReportCardComponent } from './report-card/report-card.component';
import { AttendanceComponent } from './attendance/attendance.component';
import { TimeTableComponent } from './time-table/time-table.component';
import { HomeWorkComponent } from './home-work/home-work.component';
import { EventsComponent } from './events/events.component';
import { TeacherDetailsComponent } from './teacher-details/teacher-details.component';
import {MatTableModule} from '@angular/material/table';
import {MatDividerModule} from '@angular/material/divider';
import { FlexLayoutModule } from "@angular/flex-layout";
import {MatStepperModule} from '@angular/material/stepper';
import { ViewComponent } from './view/view.component';
import {ReportCardRoutingModule} from './report-card/report-card-routing.module';


@NgModule({
  declarations: [
    AppComponent,
    SidenavComponent,
    LoginComponent,
    HeaderComponent,
    FooterComponent,
    ReportCardComponent,
    AttendanceComponent,
    TimeTableComponent,
    HomeWorkComponent,
    EventsComponent,
    TeacherDetailsComponent,
    ViewComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    SidenavRoutingModule,
    BrowserAnimationsModule,
    LayoutModule,
    MatToolbarModule,
    MatButtonModule,
    MatSidenavModule,
    MatIconModule,
    MatListModule,
    MatCardModule,
    MatGridListModule,
    MatFormFieldModule,
    MatOptionModule,
    MatSelectModule,
    MatInputModule,
    MatMenuModule ,
    MatTableModule,
    MatCheckboxModule,
    MatDividerModule,
    FormsModule, 
    ReactiveFormsModule,
    FlexLayoutModule,
    MatStepperModule,
    ReportCardRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

应用路由.module.ts 

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginComponent } from './login/login.component';
import { SidenavComponent } from './sidenav/sidenav.component';

const routes: Routes = [
  {
    path:'',
    component:LoginComponent
  },
  {
    path:'sidenav',
    component:SidenavComponent
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

login.component.html 

     <body>
      <h1></h1>
    <div class="container">


    <mat-card class="example-card">
        <img src="/assets/avatar.png" class="avatar" />

        <mat-card class="login">Login</mat-card>

          <mat-grid-list cols="1" rowHeight=5:1>
     <form [formGroup]="addForm" (ngSubmit)="onSubmit()">

              <!-- <mat-grid-tile>
              </mat-grid-tile> -->
              <mat-grid-tile>
                  <mat-form-field>
                      <input matInput placeholder="UserName" formControlName="userName">
                      <span matSuffix><mat-icon>account_circle</mat-icon></span>

                    </mat-form-field>
                  </mat-grid-tile>

                  <mat-grid-tile class="a1">
                      <mat-form-field>
                          <input matInput placeholder="password" formControlName="password">
                      <span matSuffix><mat-icon>visibility</mat-icon></span>

                        </mat-form-field>
                      </mat-grid-tile>
                      <mat-grid-tile>
                          <button mat-raised-button>Submit</button>
                      </mat-grid-tile>

                      <mat-grid-tile class="pass">  
                          <a href="#forget password">Forget Password?</a>
                        </mat-grid-tile>


                    </form>

            </mat-grid-list>
    </mat-card>
  </div>
</body>

login.component.ts 

import { Component, OnInit } from '@angular/core';
import {FormBuilder, FormGroup, Validators,FormControl } from "@angular/forms";
import {Router} from "@angular/router";
import { SidenavComponent } from '../sidenav/sidenav.component';



@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {

  constructor(private formBuilder:FormBuilder, private router:Router ) { }
  addForm: FormGroup;
  userName;
  password;
  ngOnInit() {
    this.addForm = this.formBuilder.group({
      userName:[''],
      password:['']

    })
  }

  onSubmit(){
    console.log("calling");
    console.log(this.addForm.value);
    var userName=this.addForm.value.userName;
    var password=this.addForm.value.password;
    console.log(userName);
    console.log(password);


    if(userName=="n@gmail.com" && password=="123")
    {
  alert("valid credentials");
  this.router.navigate(['sidenav'])
  }
  else{
    alert("Invalid credentials")
  }
  }

  }

sidenav.component.html 

<mat-sidenav-container class="sidenav-container">
  <mat-sidenav #drawer class="sidenav" fixedInViewport="true"
      [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
      [mode]="(isHandset$ | async) ? 'over' : 'side'"
      [opened]="!(isHandset$ | async)">
    <mat-toolbar>Menu</mat-toolbar>
    <mat-nav-list>
      <a mat-list-item routerLink="reportCard"  routerLinkActive="active-list-item">
                      <!-- <span matSuffix><mat-icon>local_library</mat-icon></span> -->
                      <span matSuffix><mat-icon>school</mat-icon>&nbsp;&nbsp;&nbsp;</span>

        Report Card</a>
      <a mat-list-item routerLink="attendance" routerLinkActive="active-list-item">
          <span matSuffix><mat-icon>calendar_today</mat-icon>&nbsp;&nbsp;&nbsp;</span>
        Attendence</a>
      <a mat-list-item routerLink="timeTable" routerLinkActive="active-list-item">
          <span matSuffix><mat-icon>date_range</mat-icon>&nbsp;&nbsp;&nbsp;</span>

        Time Table</a>
      <a mat-list-item routerLink="homeWork" routerLinkActive="active-list-item">
          <span matSuffix><mat-icon>import_contacts</mat-icon>&nbsp;&nbsp;&nbsp;</span>

        HomeWork</a>
      <a mat-list-item routerLink="events" routerLinkActive="active-list-item">
          <span matSuffix><mat-icon>insert_invitation</mat-icon>&nbsp;&nbsp;&nbsp;</span>

        Events</a>
      <a mat-list-item routerLink="teacherDetails" routerLinkActive="active-list-item">
          <span matSuffix><mat-icon>border_color</mat-icon>&nbsp;&nbsp;&nbsp;</span>

        Teacher Details</a>

        <a mat-list-item routerLink="teacherDetails" routerLinkActive="active-list-item">
            <span matSuffix><mat-icon>logout</mat-icon>&nbsp;&nbsp;&nbsp;</span>

          Logout</a>

    </mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content>
    <mat-toolbar color="primary">
      <button
        type="button"
        aria-label="Toggle sidenav"
        mat-icon-button
        (click)="drawer.toggle()"
        *ngIf="isHandset$ | async">
        <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
      </button>
      <span>Gurukulam PreSchool</span>
    </mat-toolbar>
    <!-- Add Content Here -->
    <router-outlet></router-outlet>
  </mat-sidenav-content>
</mat-sidenav-container>

sidenav-routing.module.ts 

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ReportCardComponent } from '../report-card/report-card.component';
import { AttendanceComponent } from '../attendance/attendance.component';
import { TimeTableComponent } from '../time-table/time-table.component';
import { HomeWorkComponent } from '../home-work/home-work.component';
import { EventsComponent } from '../events/events.component';
import { TeacherDetailsComponent } from '../teacher-details/teacher-details.component';
import { SidenavComponent } from '../sidenav/sidenav.component';



const routes: Routes = [
  {
 path:'sidenav',
 component:SidenavComponent,
 children:[
  {
    path:'reportCard',
    component:ReportCardComponent

  },
  {
    path:'attendance',
    component:AttendanceComponent
  },
  {
    path:'timeTable',
    component:TimeTableComponent
  },
  {
    path:'homeWork',
    component:HomeWorkComponent
  },
  {
    path:'events',
    component:EventsComponent
  },
  {
    path:'teacherDetails',
    component:TeacherDetailsComponent
  }]
  }];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class SidenavRoutingModule { }

sidenav.component.html 

<mat-sidenav-container class="sidenav-container">
  <mat-sidenav #drawer class="sidenav" fixedInViewport="true"
      [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
      [mode]="(isHandset$ | async) ? 'over' : 'side'"
      [opened]="!(isHandset$ | async)">
    <mat-toolbar>Menu</mat-toolbar>
    <mat-nav-list>
      <a mat-list-item routerLink="reportCard"  routerLinkActive="active-list-item">
                      <!-- <span matSuffix><mat-icon>local_library</mat-icon></span> -->
                      <span matSuffix><mat-icon>school</mat-icon>&nbsp;&nbsp;&nbsp;</span>

        Report Card</a>
      <a mat-list-item routerLink="attendance" routerLinkActive="active-list-item">
          <span matSuffix><mat-icon>calendar_today</mat-icon>&nbsp;&nbsp;&nbsp;</span>
        Attendence</a>
      <a mat-list-item routerLink="timeTable" routerLinkActive="active-list-item">
          <span matSuffix><mat-icon>date_range</mat-icon>&nbsp;&nbsp;&nbsp;</span>

        Time Table</a>
      <a mat-list-item routerLink="homeWork" routerLinkActive="active-list-item">
          <span matSuffix><mat-icon>import_contacts</mat-icon>&nbsp;&nbsp;&nbsp;</span>

        HomeWork</a>
      <a mat-list-item routerLink="events" routerLinkActive="active-list-item">
          <span matSuffix><mat-icon>insert_invitation</mat-icon>&nbsp;&nbsp;&nbsp;</span>

        Events</a>
      <a mat-list-item routerLink="teacherDetails" routerLinkActive="active-list-item">
          <span matSuffix><mat-icon>border_color</mat-icon>&nbsp;&nbsp;&nbsp;</span>

        Teacher Details</a>

        <a mat-list-item routerLink="teacherDetails" routerLinkActive="active-list-item">
            <span matSuffix><mat-icon>logout</mat-icon>&nbsp;&nbsp;&nbsp;</span>

          Logout</a>

    </mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content>
    <mat-toolbar color="primary">
      <button
        type="button"
        aria-label="Toggle sidenav"
        mat-icon-button
        (click)="drawer.toggle()"
        *ngIf="isHandset$ | async">
        <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
      </button>
      <span>Gurukulam PreSchool</span>
    </mat-toolbar>
    <!-- Add Content Here -->
    <router-outlet></router-outlet>
  </mat-sidenav-content>
</mat-sidenav-container>

sidenav.module.ts 

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { SidenavRoutingModule } from './sidenav-routing.module';
import {ReportCardRoutingModule} from '../report-card/report-card-routing.module';


@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    SidenavRoutingModule,
    ReportCardRoutingModule
  ]
})
export class SidenavModule { }

report-card-routing.module.ts 

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ViewComponent } from '../view/view.component';
import { ReportCardComponent } from './report-card.component';


const routes: Routes = [
  {
    path:'reportCard',
    component:ReportCardComponent,
    children:[
      {
        path:'view',
        component:ViewComponent
      }

    ]

  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class ReportCardRoutingModule { }

report-card.component.html 

<h3 align="center">Student Report Card</h3>
<mat-card>
<mat-grid-list cols="2">
  <mat-grid-tile>
<mat-card class="mat">
        <mat-card class="mat1">Student Details</mat-card>

        <img src="/assets/avtar.png" height="70px" width="70px;">

         <mat-grid-list cols="2" rowHeight="3:1">

           <mat-grid-tile>
             <h6>Name :</h6>
           </mat-grid-tile>
           <mat-grid-tile>
             <p>Aarav</p>
           </mat-grid-tile>

           <mat-grid-tile>
               <h6>Class :</h6>
             </mat-grid-tile>
             <mat-grid-tile>
               <p>1</p>
             </mat-grid-tile>
             <mat-grid-tile>
                 <h6>Section :</h6> 
               </mat-grid-tile>
               <mat-grid-tile>
                 <p>A</p>
               </mat-grid-tile>
               <mat-grid-tile> 
                <div class="row">
                  <div class="col-sm-6"></div>
                  <div class="col-sm-12">
                    <!-- <button  mat-raised-button routerLink="view" >View</button>  -->
                    <a routerLink="view">view</a>
                  </div>
                </div> 
                </mat-grid-tile>
         </mat-grid-list>  
</mat-card>
</mat-grid-tile>

<mat-grid-tile>
  <mat-card class="mat">
    <mat-card class="mat1">Teacher Details</mat-card>

    <img src="/assets/avtar.png" height="70px" width="70px;">

     <mat-grid-list cols="2" rowHeight="3:1">

       <mat-grid-tile>
         <h6>Name :</h6>
       </mat-grid-tile>
       <mat-grid-tile>
         <p>Aaroh</p>
       </mat-grid-tile>

       <mat-grid-tile>
           <h6>Class :</h6>
         </mat-grid-tile>
         <mat-grid-tile>
           <p>1</p>
         </mat-grid-tile>
         <mat-grid-tile>
             <h6>Section :</h6> 
           </mat-grid-tile>
           <mat-grid-tile>
             <p>A</p>
           </mat-grid-tile>
     </mat-grid-list>  
</mat-card>
</mat-grid-tile>


</mat-grid-list>
</mat-card>
<router-outlet></router-outlet>

0 个答案:

没有答案
相关问题
最新问题