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>

当我将 content-wrapper 的 div 和应用程序侧边栏 html 中的 div 并在页脚的开头关闭它时，应用程序会继续加载，当它是一个没有类或任何其他元素的 div 时也会发生这种情况

Answer 1

组件的模板必须是有效的 HTML，因此不支持模板中只有开始元素或只有结束元素。

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

<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{}