找不到页面的角度架构显示整页答案

【问题标题】：angular architecture for no page found display full page找不到页面的角度架构显示整页
【发布时间】：2020-08-23 22:24:44
【问题描述】：

为我的 Angular 项目构建 Angular 路由的最佳策略是什么，有什么好的资源或书籍吗？
如何在不显示任何其他组件的情况下显示“未找到页面”，我的角度架构如下

index.html

<app-root></app-root>

app.component.html

<div class="main-container">
    <header>
        <app-menu></app-menu> //for dark/light theme, language
        <app-header></app-header> //title
        <br>
        <app-nav></app-nav> //navbar menu
        <br>
    </header>
    <section>
        <router-outlet></router-outlet> //page body, to load further components
    </section>
    <footer>
        <app-footer></app-footer>
    </footer>
</div>

“nopagefound”路由路径

{ path: '**', component: NopagefoundComponent },

它会为不在路由路径上的任何站点（例如“mydomain/xyz”）激活但它与其他组件的显示方式类似

<app-menu>
<app-header>
<app-nav>
{{no page found}}
<app-footer>

我的目标是像这样显示它

{{ no page found }}

没有任何其他组件

更新：谢谢，我知道了

【问题讨论】：

标签： angular

【解决方案1】：

你可以分开你的路线：

首先，创建一个布局组件：

然后像下面这样设置你的路线：

export const routes: Routes = [
  {
    path: '',
    component: MainLayoutComponent,
    children: [
      {
        path: 'home',
        component: HomeComponent,
      },
      {
       // other route
      }
  },
  { path: 'not_found', component: NopagefoundComponent },
  { path: '**', redirectTo: 'not_found' },
]

接下来，将只需要<router-outlet></router-outlet>的app.component.html的内容移动到布局组件中，

完成！

【讨论】：

【解决方案2】：

第一种方法：使用服务守卫并包含在您的路由模块中。
第二种方法：可以在lazy上使用2个路由模块。
第三种方法：您可以在组件（app.nav、footer、...）内部注入路由，并讨论该路由是未找到还是另一个。

【讨论】：