时间戳

首页 > 解决方案 > 不使用主“模板”创建页面

angular - 不使用主“模板”创建页面

问题描述

我有一个角度应用程序（使用 primefacesng）。

在我的 index.html 上，我有一个标准的 app-root 标记。

在 app-component.html（应用程序的主要应用程序组件）上，我有页面的页眉、页脚。和路由器插座。

这工作正常。当我在应用程序上导航时，我的代码显示在带有页眉和页脚的路由器插座的位置。

但我需要创建一个没有此页眉和页脚的页面。像登录页面或类似的东西。我怎样才能做到这一点？

根据要求，我创建了一个 stackblitz 来展示我需要的内容：

https://stackblitz.com/edit/routing-angular-wf6x8r

当我单击主页上的未找到按钮时，我不希望它在顶部显示选项卡。只有“未找到此页面”消息和“返回主页”按钮。

这个 stackblitz 与实际项目的关系非常简单，所以我想尽可能少地进行更新。

标签： angularangular-routing

解决方案

作为基础组件，例如您的登录组件和外壳组件。按照您在 AppRoutingModule 中的习惯路由到它们：

const routes: Routes = [
{
  path: "login",
  component: LoginComponent
},
{
  path: "",
  component: ShellComponent
}
];

然后创建一个带有路由的外壳模块以及一个外壳组件。然后将 Childroutes 添加到其路由模块（shell-routing.module.ts）。外壳组件包括页眉、页脚组件以及第二个路由器出口。

const routes: Routes = [
{
path: "",
component: ShellComponent,
children: [
  {
    path: "",
    component: HomeComponent
  },
  {
    path: 'about',
    ...
  }
 ...
}

而已。

推荐阅读