Angular 4添加具有未闭合元素的组件

Question

我正在使用Angular 4开发项目 我的应用程序组件：

<app-header></app-header>
<app-sidebar></app-sidebar>
<div class="content-wrapper">
<router-outlet></router-outlet>
</div>
<app-footer></app-footer>

当我把内容包装器的div和应用程序侧边栏html并在页脚开头关闭它时，应用程序会继续加载，当没有类或任何其他元素的div时，也会发生这种情况< / p>

Answer 1

组件的模板需要是有效的HTML，因此不支持在模板中只有开头或仅关闭元素。

您可以使用<app-header-and-footer>元素和<ng-content>元素来获得相同的效果。

<app-header-and-footer></app-header-and-footer>
  <app-sidebar></app-sidebar>
  <div class="content-wrapper">
  <router-outlet></router-outlet>
  </div>
</app-header-and-footer>

@Component({
   selector: 'app-header-and-footer',
   template: '<ng-content></ng-content>'
})
export class AppHeaderAndFooter{}