Question

我是角度开发的新手，并且对当前项目的开发有疑问。我想使我的主页静态，我希望其他页面加载页眉和页脚。我已经在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>

Answer 1

如果您加载如下所示的组件

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

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

1）在页眉和页脚标记中都添加条件“ * ngIf ”，并检查router-link / component是否不在家。

2）单独的home模块和延迟加载其他组件。通过这种方式，您可以将HTML分隔为首页组件和其他组件。

此外，要在代码段下方使用路由。

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

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

像静态主页和其他动态页面一样的wordpress，角度为4

1 个答案: