Блог

У меня есть вложенное боковое меню навигации, и проблема в том, что оно направляется к указанному модулю, но представление не отображается. Я могу перенаправить к вложенным компонентам, но не к компоненту, который не является вложенным. Например, Create a Reservation представление отображается нормально. Но Find a Claim представление не отображает HTML.

app.component.html

     <mat-sidenav #appDrawer mode="push" opened="false">
      <mat-nav-list>
        <app-menu-list-item *ngFor="let item of navItems" [item]="item"></app-menu-list-item>
      </mat-nav-list>
    </mat-sidenav>
    <app-top-nav fxHide.xs></app-top-nav>
    <router-outlet></router-outlet>
  </mat-sidenav-container>
 

app.component.ts

 import { ElementRef, ViewChild } from '@angular/core';
import { Component } from '@angular/core';
import { MatSidenav } from '@angular/material';
import { StartupService } from './core/services/startup.service';
import { NavItem } from './nav-item.model';
import { NavService } from './nav.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
title = 'iris-modernization';

constructor(private navService: NavService, public startUpServ: StartupService) { }
  @ViewChild('appDrawer', { static: false }) appDrawer: ElementRef;
  navItems: NavItem[] = [
    {
      displayName: 'My Links',
      route: 'app/my-links',
      children: [
        {
          displayName: 'Create a Reservation',
          route: 'app/my-links/create-reservation'
        },
        {
          displayName: 'My Message Center',
          route: 'app/my-links/message-center'
        },
        {
          displayName: 'My Open Claims',
          route: 'app/my-links/open-claims'
        },
        {
          displayName: 'My Recent Closed Claims',
          route: 'app/my-links/recent-closed-claims'
        },
        {
          displayName: 'Open Claim Dashboard',
          route: 'app/my-links/open-claim-dashboard'
        },
        {
          displayName: 'Closed Claim Dashboard',
          route: 'app/my-links/closed-claim-dashboard'
        },
        {
          displayName: 'Batch Rental Extension',
          route: 'app/my-links/batch-rental-extension'
        }
      ]
    },
    {
      displayName: 'Find a Claim',
      route: 'app/find-claim'
    },
    {
      displayName: 'Find Rental Location',
      route: 'app/find-rental-location'
    },
    {
      displayName: 'Other Links',
      route: 'app/other-links',
      children: [
        {
          displayName: 'CCC',
          route: 'app/other-links/CCC'
        }
      ]
    },
    {
      displayName: 'Administration',
      route: 'app/administration',
      children: [
        {
          displayName: 'User Information',
          route: 'app/administration/user-information'
        },
        {
          displayName: 'Edit Logon Information',
          route: 'app/administration/edit-logon-information'
        },
        {
          displayName: 'User Management',
          route: 'app/administration/user-management'
        },
        {
          displayName: 'Manage Site',
          route: 'app/administration/manage-site'
        },
        {
          displayName: 'Manage LOR Limits',
          route: 'app/administration/manage-lor-limits'
        },
        {
          displayName: 'Manage Users',
          route: 'app/administration/manage-users'
        },
        {
          displayName: 'Manage Licensees',
          route: 'app/administration/manage-licensees'
        },
        {
          displayName: 'Ad Hoc Data Extract',
          route: 'app/administration/ad-hoc'
        },
        {
          displayName: 'Switch Partner',
          route: 'app/administration/switch-partner'
        },
        {
          displayName: 'Manage Messages',
          route: 'app/administration/manage-messages'
        }
      ]
    },
    {
      displayName: 'Logout',
      route: 'app/logout'
    }
  ]

  ngOnInit(){
  
  }

  ngAfterViewInit() {
    this.navService.appDrawer = this.appDrawer;
  }
}

 

app.routing.module.ts

 import { Component, NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AppComponent } from './app.component';

const routes: Routes = [
  { path: '', redirectTo: 'app/partner-selection', pathMatch: 'full' },

  { 
    path: 'app/partner-selection', 
    loadChildren: './partner-selection/partner-selection.module#PartnerSelectionModule',
  },

  { 
    path: 'app/my-links', children: 
    [
      {
        path: 'app/my-links/create-reservation', 
        loadChildren: './my-links/create-reservation/create-reservation.module#CreateReservationModule'
      },

      {
        path: 'app/my-links/message-center',
        loadChildren: './my-links/message-center/message-center.module#MessageCenterModule'
      },

      {
        path: 'app/my-links/open-claims',
        loadChildren: './my-links/open-claims/open-claims.module#OpenClaimsModule'
      },

      {
        path: 'app/my-links/recent-closed-claims',
        loadChildren: './my-links/recent-closed-claims/recent-closed-claims.module#RecentClosedClaimsModule'
      },

      {
        path: 'app/my-links/open-claim-dashboard',
        loadChildren: './my-links/open-claim-dashboard/open-claim-dashboard.module#OpenClaimDashboardModule'
      },

      {
        path: 'app/my-links/closed-claim-dashboard',
        loadChildren: './my-links/closed-claim-dashboard/closed-claim-dashboard.module#ClosedClaimDashboardModule'
      },

      {
        path: 'app/my-links/batch-rental-extension',
        loadChildren: './my-links/batch-rental-extension/batch-rental-extension.module#BatchRentalExtensionModule'
      }
    ]
  },

  { 
    path: 'app/find-claim', 
    loadChildren: './find-claim/find-claim.module#FindClaimModule',
  },

  { 
    path: 'app/find-rental-location', 
    loadChildren: './find-rental-location/find-rental-location.module#FindRentalLocationModule',
  },


];

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

 

app.module.ts

 import { BrowserModule } from '@angular/platform-browser';
import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HttpClientModule } from '@angular/common/http';
import { CreateReservationModule } from './my-links/create-reservation/create-reservation.module';
import { BrowserAnimationsModule, NoopAnimationsModule } from '@angular/platform-browser/animations';
import { MatToolbarModule,MatIconModule,MatCardModule,MatButtonModule,
  MatProgressSpinnerModule, MatListModule, MatSidenavModule, } from '@angular/material';
import { MatMenuModule} from '@angular/material/menu';
import { CoreModule} from './core/core.module';
import {PartnerSelectionModule} from './partner-selection/partner-selection.module';
import {MatExpansionModule} from '@angular/material/expansion';
import { NavService } from "./nav.service";
import { MenuListItemComponent } from './menu-list-item/menu-list-item.component';
import { TopNavComponent } from './top-nav/top-nav.component';
import { MessageCenterModule } from './my-links/message-center/message-center.module';
import { OpenClaimsModule } from './my-links/open-claims/open-claims.module';
import { RecentClosedClaimsModule } from './my-links/recent-closed-claims/recent-closed-claims.module';
import { OpenClaimDashboardModule } from './my-links/open-claim-dashboard/open-claim-dashboard.module';
import { ClosedClaimDashboardModule } from './my-links/closed-claim-dashboard/closed-claim-dashboard.module';
import { BatchRentalExtensionModule } from './my-links/batch-rental-extension/batch-rental-extension.module';
import { StartupService } from './core/services/startup.service';
import "bootstrap";
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { ToastrModule } from 'ngx-toastr';
import { CarouselModule } from 'ngx-bootstrap/carousel';
import { FindRentalLocationModule } from './find-rental-location/find-rental-location.module';
import { FindClaimModule } from './find-claim/find-claim.module';




@NgModule({
  declarations: [
    AppComponent,
    MenuListItemComponent,
    TopNavComponent,
       
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    AppRoutingModule,
    HttpClientModule,
    NoopAnimationsModule,
    CoreModule,
    MatToolbarModule,
    MatIconModule,
    MatCardModule,
    MatButtonModule,
    MatProgressSpinnerModule,
    CreateReservationModule,
    MatListModule, 
    MatSidenavModule,
    MatMenuModule,
    PartnerSelectionModule,
    MatExpansionModule,
    MessageCenterModule,
    OpenClaimsModule,
    RecentClosedClaimsModule,
    OpenClaimDashboardModule,
    ClosedClaimDashboardModule,
    BatchRentalExtensionModule,
    FindRentalLocationModule,
    FindClaimModule,
    FontAwesomeModule,
    ToastrModule.forRoot(),
    CarouselModule.forRoot(),
    
    
  ],
  providers: [NavService, StartupService],
  bootstrap: [AppComponent]
})
export class AppModule { }

 

find-claim.routing.module.ts

 import { NgModule }             from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { FindClaimHomeComponent } from './find-claim-home/find-claim-home.component';

const myLinkRoutes: Routes = [
    {path: 'app/find-claim', component: FindClaimHomeComponent },
    
];

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

find-claim.module.ts

 import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FindClaimHomeComponent } from './find-claim-home/find-claim-home.component';
import { FindClaimRoutingModule } from './find-claim.routing.module';



@NgModule({
  entryComponents: [FindClaimHomeComponent],
  declarations: [FindClaimHomeComponent],
  imports: [
    CommonModule,
    FindClaimRoutingModule
  ]
})
export class FindClaimModule { }