Angular 4 - 如何在具有不同布局（页眉和页脚）的页面之间路由？答案

【问题标题】：Angular 4 - How to route between pages with different Layout (header and footer)?Angular 4 - 如何在具有不同布局（页眉和页脚）的页面之间路由？
【发布时间】：2019-03-12 23:00:03
【问题描述】：

我是 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 中添加 router-outlet，以便在每个页面上加载相应的元素。

我正在寻找一种更好的方法，其中 /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>

【问题讨论】：

标签： angular routes

【解决方案1】：

创建一个 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>

【讨论】：

谢谢你，这很好现在问题是当我从主页导航到一个页面时，例如 localhost/about 从那里当我尝试点击它没有加载的联系页面时，它显示了 url作为 localhost/about/(contact) 但是如果我从主页直接打开联系人页面，它会打开 `path:'', component: FrontendLayoutComponent, children: [ { path:'', component: IndexComponent }, { path:'about' , 组件: AboutComponent }, { path:'contact', 组件: ContactComponent }, ] `
↑ 现已解决。在 routerLink 中缺少“/”。以前是 routerLink="contact" 将其更改为 routerLink="/contact" 现在一切正常。谢谢。

【解决方案2】：

将您的<header-nav></header-nav> 删除到 app.component.html 中，并将每个 component.html 放在您想要的位置。 <dashboard-header></dashboard-header> 相同你想要的地方直接放那个component.html。

【讨论】：

【解决方案3】：

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

例子：

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

【讨论】：