我已经创建了一个Angular应用程序，为此，如果用户指向一个未知的URL，它应该进入404页面，显示一个友好的消息以重定向到Home。现在，我创建了一个显示此404的组件。现在的问题是，它显示了页眉和页脚。在这种情况下，我不希望显示页眉和页脚The page right now我需要显示没有页眉和页脚的404。有没有简单的方法可以实现它。在此先感谢。
Index.html
<body>
<app-root></app-root>
</body>
app.component.html
<div *ngIf="!webLoading">
<app-header></app-header>
<div class="minhgt-router-outlet">
<router-outlet></router-outlet>
</div>
<app-footer></app-footer>
</div>
<div class='modal d-flex carousel' *ngIf="webLoading">
<p-progressSpinner [style]="{width: '50px', height: '50px'}"
strokeWidth="4" fill="#ffffff" animationDuration=".8s"></p-progressSpinner>
</div>
not-found.component.html
<div class="notfound">
<div class="notfound-404">
<h3>Oops! Page not found</h3>
<h1>
<span>4</span>
<span>0</span>
<span>4</span>
</h1>
</div>
<h2>we are sorry, but the page you requested was not found</h2>
</div>
app-routing.module.ts
const routes: Routes = [
{
path: "",
component: BodyContentComponent
},
{
path: "**",
component: NotFoundComponent
}
];
在您的AppComponent中，您可以订阅路由器事件并检查当前URL，并根据模板文件中的条件添加条件。
url: string;
ngOnInit(): void {
this.router.events.pipe(
filter((event) => event instanceof NavigationEnd),
map((e: NavigationEnd) => this.url = e.url)
).subscribe();
}
然后，在您的模板中，
<ng-container *ngIf="url !== '/404url'"> <app-header></app-header></ng-container>
此外，要使此方法起作用，您应该为404页面设置特定的路由，并将所有通配符路由重定向到该页面。
{
path: '**',
redirectTo: '404PageRoute',
pathMatch: 'full'
}, {
path: '404PageRoute',
component: NotFountcomponent
}
在您的not-found.component的CSS中添加
.hasDisplay {
display: none;
}
[hasDisplay类必须在页眉和页脚的div中]
并添加
@Component({
selector: 'app-not-found',
templateUrl: './not-found.component.html',
styleUrls: ['./not-found.component.scss'],
encapsulation: ViewEncapsulation.None
})
希望有用