Angular 角度6：如何使元件具有非闭合标记

使用Angular 6，我希望使用openCenteredPage和closeCenteredPage组件（但使用非结束标记）包装某些页面（不是全部），例如：

<openCenteredPage></openCenteredPage>
my HTML here
<closeCenteredPage></closeCenteredPage>

---

使用带有非结束标记的可重用HTML的最佳实践是什么？

它不是这样工作的

必须仅使用一个标记来实现行为

这应该是这样的

<app-center>
  Your centered HTML content
</app-center>

以HTML为中心的内容

HTML无法理解两个不同的标签组成一个标签。因此，如果最简单的标记语言HTML不能做到这一点，不要指望Angulat能做到

（如果我没有弄好，非结束标记与结束标记相同，所以）

==

您可以创建

单个组件，如

myCustomComponent

插入/添加动态组件（

my dynamic component

，其中包含您的html内容） 将

createComponent

方法或

createEmbeddedView

方法用于

myCustomComponent

所以

myCustomComponent.html

<div class="bounds page-wrapper">
  <div class="content" fxLayout="row" fxLayout.xs="column" fxFlexFill >
    <div fxFlex="10" fxFlex.xs="55">
    </div>
    <div fxFlex="80">
        <div class="main-div">
            <section class="mat-typography">
    <my-dynamic-component></my-dynamic-component>  <!-- inject your dynamic stuff here. -->
    </section>
  </div>
</div>
</div>

---

您可以按照下面的说明了解更多细节。

我认为您的想法在角度上是不正确的。如果需要将自定义内容传递给组件/路由，则应始终使用结束标记，然后使用

<router-outlet></router-outlet>

或

---

（ng内容可以命名为在组件中使用乘法）

谢谢。因此，如果我理解正确，您必须以另一种方式来做，将一个组件注入到这个通用组件中，用flex构建我的页面。我说得对吗？

<app-center></app-center> === <app-center />

<div class="bounds page-wrapper">
  <div class="content" fxLayout="row" fxLayout.xs="column" fxFlexFill >
    <div fxFlex="10" fxFlex.xs="55">
    </div>
    <div fxFlex="80">
        <div class="main-div">
            <section class="mat-typography">
    <my-dynamic-component></my-dynamic-component>  <!-- inject your dynamic stuff here. -->
    </section>
  </div>
</div>
</div>

<router-outlet></router-outlet>

<ng-content></ng-content>