wordpress 喜欢静态主页和角度 4 中的其他动态页面

【问题标题】：wordpress like static home page and other dynamic pages in angular 4wordpress 喜欢静态主页和角度 4 中的其他动态页面
【发布时间】：2018-10-20 05:20:40
【问题描述】：

我是 Angular 开发的新手，我对当前项目的开发有疑问。我想让我的主页静态，我希望其他页面加载页眉和页脚。我在 wordpress 中看到了这一点，我想用 angular 4 实现相同的功能。
我已经在角度尝试过这个

const routes: Routes = [
 { path: '', component: HomeComponent },
 { path: 'search', component: SearchComponent }
];

在模板中我设置了类似的东西

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

【问题讨论】：

只要您的组件之一是静态的并且路由映射到该静态组件，这将正常工作

标签： angular routing angular2-routing

【解决方案1】：

如果你像下面这样加载组件

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

然后每个组件都将加载页眉和页脚，包括您的主页。要解决这个问题，您有两个解决方案。

1) 在页眉和页脚标签中加入条件 "*ngIf" 并检查 router-link/component 是否不在首页。

2) 分离 home 模块并延迟加载其他组件。通过使用这种方式，您可以为 home 组件和其他组件分离 HTML。

另外，用于sn-p下面的路由。

const routes: Routes = [
 { path: '', redirectTo: '/home', pathMatch: 'full' },
 { path: 'home', component: HomeComponent },
 { path: 'search', component: SearchComponent }
];

如果任何路由不匹配或为空白，这会将您重定向到主页。

【讨论】：