Question

我是Angular 2+的初学者。

我的项目包含一个称为“首页”和“关于”页面的登录页面，这些页面具有与该登录页面相关的页眉和页脚。有一个登录按钮，在登录按钮之后，仪表板的页眉和页脚更改了（菜单是隐藏的颜色更改等）。

当前，我已在app.module.ts中的项目中设置路由，如下所示：

    { path: 'home', component: HomeComponent },
    { path: 'about', component: AboutComponent },
    { path: 'login', component: LoginComponent},
    { path: 'dashboard', component: DashboardComponent},

现在路由工作正常，页眉和页脚加载正常，但是当我导航至localhost / dashboard时，着陆页的页眉和页脚也显示在其中，这很明显，因为我已经将它们放置在我的app.component.html文件中

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

问题： 我想要实现的是，当URL中加载“ / dashboard”时，app.component.html的页眉和页脚未加载，而来自不同component.html文件的页眉和页脚也未加载。

方法1：我可以在每个组件的每个html页面中添加页眉和页脚，并在app.component.html中仅添加路由输出，以便将相应的元素加载到每个页面上。

我正在寻找一种更好的方法，其中/ dashboard从另一个component.html文件加载，并且我可以轻松创建登录页面app.component.html

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

和dashboard.component.html

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

Answer 1

将<header-nav></header-nav>移到app.component.html中，并将每个component.html放在所需的位置。与<dashboard-header></dashboard-header>相同您想要的位置直接将其放置在component.html。

Answer 2

创建一个LandingComponent和DashboardComponent。然后，着陆组件可以拥有需要着陆布局的自己的子路线同样适用于仪表板。

路由

const routes: Routes = [
  {
    path: '',
    component: LandingComponent,
    children: [
      {
        path: 'features',
        component: FeaturesComponent
      }
    ]
  },
  {
    path: 'dashboard',
    component: DashboardComponent,
    children: [
      {
        path: 'analytics',
        component: AnalyticsComponent
      }
    ]
  }
];

landing.component.html

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

dashboard.component.html

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

app.component.html

<router-outlet>

Answer 3

您可以使用* ngIf来按路线显示和隐藏元素。因此，如果您只需要在特定路线上显示标头，则这是最好的情况。

示例：

*ngIf="router.url === '/some/route'"

Angular 4-如何在具有不同版式（页眉和页脚）的页面之间路由？

3 个答案: