如何在没有导航栏的情况下创建未找到的页面

Question

我正在研究路由和导航，但一直在研究如何在没有导航和页面标题的情况下呈现404页面。

app.copmponent.html

<h2>Bonsai Store Ap</h2>
<nav>
<a class="button" routerLink="/products" routerLinkActive="activebutton" ariaCurrentWhenActive="page">Products</a> |
<a class="button" routerLink="/cart" routerLinkActive="activebutton" aruaCurrentWhenActive="page">Shopping Cart</a>
</nav>
<router-outlet></router-outlet>

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { ProductsListComponent } from './products-list/products-list.component';
import { ShoppingCartComponent } from './shopping-cart/shopping-cart.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
@NgModule({
imports: [
BrowserModule,
RouterModule.forRoot([
{ path: 'products', component: ProductsListComponent },
{ path: 'cart', component: ShoppingCartComponent },
{ path: '', redirectTo: '/products', pathMatch: 'full' },
{ path: '**', component: PageNotFoundComponent }
]),
FormsModule,
],
declarations: [
AppComponent,
ProductsListComponent,
ShoppingCartComponent,
PageNotFoundComponent,
],
bootstrap: [AppComponent],
})
export class AppModule {}

我希望在没有导航按钮和页面标题的情况下呈现页面未找到组件

Answer 1

我终于得到了答案！！这一切都是关于你路由的层次结构

应用程序。component.html

home.component.html

<h2>Bonsai Store App</h2>
<nav>
<a class="button" routerLink="/products" routerLinkActive="activebutton" ariaCurrentWhenActive="page">Products</a> |
<a class="button" routerLink="/cart" routerLinkActive="activebutton" aruaCurrentWhenActive="page">Shopping Cart</a>
</nav>
<router-outlet></router-outlet>

app.module.ts

RouterModule.forRoot([
{
path: '',
component: HomeComponent,
children: [
{ path: 'products', component: ProductsListComponent },
{ path: 'cart', component: ShoppingCartComponent },
{ path: '', redirectTo: 'home', pathMatch: 'full' }
]
},
{ path: '**', component: PageNotFoundComponent },