Question

在我的Angular（v.7）应用程序中，我实际上希望所有路由都具有导航栏和页脚，它们可以正常工作，即我的app.component.html看起来像：

<header></header>
<router-outlet></router-outlet>
<footer></footer>

我的路线如下：

  {
    path: "foo",
    loadChildren: "./foo/foo.module#FooModule",
    canActivate: [AuthenticationGuard]
  },
  {
    path: "bar",
    loadChildren: "./bar/bar.module#BarModule",
    canActivate: [AuthenticationGuard]
  }

对于某些路线，我需要全屏设置，其中看不到页眉或页脚。

我想通过路由而不是通过指令来解决它，因为它们使一切变得不可靠，并且我不希望处理诸如“ isHeaderVisible”标志之类的其他状态。

感觉应该有一个不错的路由器设置，可以完成我的目标。

所以我本质上想要的是让我的主要组件仍然像上面一样，而另一个只是拥有一个

<router-outlet></router-outlet>

接收其他路线的

我不知道可以使用的路由设置。

Answer 1

您可以创建2个包装器组件，例如PublicComponent和AuthenticatedComponent

假设结构如下：

- AppComponent
--- PublicComponent
------ LoginComponent
------ RegisterComponent
--- AuthenticatedComponent
------ DashboardComponent
------ SettingsComponent

然后您的路线如下：

{
    path: '',
    component: AuthenticatedComponent,
    children: [
        {
           path: "foo",
           loadChildren: "./foo/foo.module#FooModule"
         },
        {
           path: "bar",
           loadChildren: "./bar/bar.module#BarModule",
         },
   canActivate: [AuthenticationGuard],
   canActivateChild: [AuthenticationGuard]
},
{
    path: '',
    component: PublicComponent,
    children: [
        {
           path: "login",
           component: LoginComponent
         },
         {
           path: "register",
           component: RegisterComponent
         },

}

您需要相应放置router-outlet：

AppComponent

<router-outlet></router-outlet>

AuthenticatedComponent

<header></header>
<sidebar></sidebar>
<router-outlet></router-outlet>
<footer></footer>

PublicComponent

<sidebar></sidebar>
<router-outlet></router-outlet>
<another-component></another-component>

希望这会给您一个提示

在某些路线上全屏设置角路由器（即没有页眉和页脚）

1 个答案: