Question

我有PageNotFoundComponent，我没有在任何模块中声明过。但是我将其包含在路由模块中，以确保当我们没有匹配的路由时，该组件将位于应用程序组件的路由器出口中。

app.component.html

    <app-header></app-header>
    <br>
     <div class="container">
        <router-outlet></router-outlet>
     </div>

也

app.module.ts

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

import { AppComponent } from './app.component';



import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HeaderComponent } from './header/header.component';
import { ShoppingListComponent } from './shopping-list/shopping-list.component';
import { ShoppingEditComponent } from './shopping-list/shopping-edit/shopping-edit.component';


import { highlightDirective } from './Directives module/highlight.directive';
import { ImprovedHighlightDirective } from './Directives module/improved-highlight.directive';
import { ReverseOfIfDirDirective } from './Directives module/reverse-of-if-dir.directive';
import { DropdownDirectiveDirective } from './shared/dropdown-directive.directive';


import { ShoppinglistService } from './shopping-list/shoppinglist.service';
import { AppRoutingModule } from './app-routing.module';
import { RecipesService } from './recipes/recipes.service';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { AuthComponent } from './auth/auth.component';
import { LoadingSpinnerComponent } from './shared/loading-spinner/loading-spinner.component';
import { AuthInterceptorService } from './auth/auth-interceptor.service';
import { AlertComponent } from './shared/alert/alert.component';
import { PlaceholderDirective } from './shared/placeholder.directive';
import { RecipesModule } from './recipes/recipes.module';
// import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
// import { RecipesRoutingModule } from './recipes/recipes-routing.module';



@NgModule({
  declarations: [ // add any new components here
    AppComponent,
    HeaderComponent,

    ShoppingListComponent,
    ShoppingEditComponent,
    highlightDirective,
    ImprovedHighlightDirective,
    ReverseOfIfDirDirective,
    DropdownDirectiveDirective,
    AuthComponent,
    LoadingSpinnerComponent,
    AlertComponent,
    PlaceholderDirective,
    

  ],
  imports: [// all imports here
    BrowserModule,
    FormsModule,
    AppRoutingModule,
    ReactiveFormsModule,
    HttpClientModule,
    RecipesModule,

  ],
  providers: [ShoppinglistService, RecipesService, { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptorService, multi: true }],
  // ,ServersService,AuthService,AuthGuard,CanDeactivateGuard,
  // ServerResolverService
  bootstrap: [AppComponent]
})
export class AppModule { }

应用路由模块

import { Routes, RouterModule } from '@angular/router';

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

import { ShoppingListComponent } from './shopping-list/shopping-list.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';

import { AuthComponent } from './auth/auth.component';


const appRoutes: Routes = [

  { path: '', redirectTo: '/recipes', pathMatch: 'full' },
  { path: 'shoppinglist', component: ShoppingListComponent },
  { path: 'auth', component: AuthComponent },

  {
    path: 'not-found', component: PageNotFoundComponent, data: { message: '404 error ! Explore our site to know more' }
  },
  { path: '**', redirectTo: '/not-found' }
]

@NgModule({
  imports: [RouterModule.forRoot(appRoutes)],
  exports: [RouterModule]
})

export class AppRoutingModule {

}

现在，当我转到一些不可用的路线时，我会自动转到未找到页面的组件并成功加载。

image of output

注意：使用Angular 9版本...。也许有人可以知道是否添加了任何此类功能。

为什么即使没有声明任何模块也可以访问组件？

0 个答案: