Angular 4 - 如何在具有不同布局(页眉和页脚)的页面之间进行路由？

Question

我是 Angular 2+ 的初学者。

我的项目包含一个登陆页面，称为主页和关于页面，这些页面具有与登陆页面相关的页眉和页脚。 有一个登录按钮，在登录按钮之后，仪表板的页眉和页脚会更改(菜单会隐藏颜色更改等)。

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

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

现在 路由工作正常，页眉和页脚加载正常，但是当我导航到本地主机/仪表板时，登录页面的页眉和页脚也出现在那里，这是显而易见的，因为我已经放置了它们在我的 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

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