角5布局模板

Question

我正在寻找最佳实践如何定义自定义的全局应用程序布局角。在.NET中，这是通过使用母版页实现的。基本上，我希望在一个位置定义全局布局(菜单、页眉、内容、页脚位置)，然后在从该布局继承的所有页面中重用它；包括可修改从子到父的布局(即某些页面修改了菜单、页脚或需要向页眉注入额外的按钮)。

有什么推荐的最佳实践吗？

Answer 1

如果您必须有可重用的css，您可以用style.css编写它，然后您可以在您想要的应用程序的每个组件中使用这些类。但是，如果您想导入诸如菜单、页眉、页脚等内容，我建议您为这些部分创建单个组件，然后使用组件来包含应用程序的框架：

//skeleton.component.html
<div>
  <app-header></app-header>
  <app-menu></app-menu>
  <router-outlet></router-outlet>
  <app-footer></app-footer>
</div>

然后每个组件都有自己的css，您不需要在几个内容中导入它。指令router-outlet引导您指向在router.module.ts中选择的组件。

编辑1:

在您的page.component.html中，您应该这样做：

@Output() content-for-header;

在skeleton.html中：

<app-header [content-from-page]="content-for-header"></app-header>

在header.html中：

@Input() content-from-page;