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>