所以我想创建一个与主要内容的路由器导出无关的全屏404页面。
因为现在当我访问一个不存在的页面时，404页面内容会显示在路由器导出内，标题、导航栏等仍然存在。
但是我希望它像全屏 404 页面中的整个屏幕一样。 像这样的东西，只是顶部没有导航栏:https://www.blizzard.com/en-us/asdasdasd
这是我到目前为止所拥有的:
app.component.html
<div class="background-placeholder">
<app-navbar></app-navbar>
<!--<app-header></app-header>-->
<router-outlet></router-outlet>
<app-footer></app-footer>
</div>
应用程序路由.module.ts
{
path: '**',
pathMatch: 'full',
component: NotFoundComponent
}
未找到组件:
<body>
<p>404</p>
</body>
提前致谢。
最佳答案
有多种方法可以实现您想要的目标。
<强>1。叠加(快速且肮脏):
你所做的看起来相当不错。只是不要尝试更换所有东西 - 只需躺下即可。
在 not-found.component.scss 中
:host {
position: fixed;
width: 100%;
height: 100%;
}
并在 NotFoundComponent 中做任何你喜欢做的事情。这绝对不是最干净的解决方案(只需考虑屏幕阅读器......)，但它非常简单并且可以完成工作。
<强>2。隐藏导航栏、页眉和页脚的服务(干净，稍微复杂一点)
创建一个可以控制基本应用功能(例如显示和隐藏顶级组件)的 AppService。
在 app.service.ts 中执行类似的操作:
@Injectable({
providedIn: 'root'
})
export class AppService {
showNavigation$: BehaviorSubject<boolean>;
showHeader$: BehaviorSubject<boolean>;
showFooter$: BehaviorSubject<boolean>;
constructor() {
this.showNavigation$ = new BehaviorSubject<boolean>(true);
this.showHeader$ = new BehaviorSubject<boolean>(true);
this.showFooter$ = new BehaviorSubject<boolean>(true);
}
}
将 AppService 注入(inject)您的 AppComponent 并将组件绑定(bind)到字段。 应用程序组件.html:
<div class="background-placeholder">
<app-navbar *ngIf="appService.showNavigation$ | async"></app-navbar>
<!--<app-header *ngIf="appService.showHeader$ | async"></app-header>-->
<router-outlet></router-outlet>
<app-footer *ngIf="appService.showFooter$ | async"></app-footer>
</div>
将服务注入(inject)到 NotFoundComponent 并将“show”属性设置为 false。
appService.showNavigation.next(false);
appService.showHeader.next(false);
appService.showFooter.next(false);
这是一种从子组件控制应用程序范围功能的简洁而优雅的方式。
<强>3。导航中的更多层次结构(干净，但稍微弄乱了网址)
清空您的 AppComponent，使其仅包含 RouterOutlet。
app.component.html:
<div class="background-placeholder">
<router-outlet></router-outlet>
</div>
现在添加诸如母版页之类的内容。
master.component.ts:
<app-navbar></app-navbar>
<!--<app-header></app-header>-->
<router-outlet></router-outlet>
<app-footer></app-footer>
最后定义具有更多层次结构的路由，如下所示:
应用程序路由.module.ts:
{
path: 'side',
component: MasterComponent,
children: [
{...your actual routes here...},
{
path: '*',
redirectTo: '/not-found'
]
},
{
path: 'not-found',
component: NotFoundComponent
}
这样母版页甚至不会用于未找到的路由。
关于带路由器导出的 Angular 全屏 404 页面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/70915063/