Angular 6: 如何让一个组件有非结束标签

Question

使用 Angular 6，我想用 openCenteredPage 和 closeCenteredPage 组件（但带有非关闭标签）包装某些页面（不是全部），例如：

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

例如 openCenteredPage.component.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">

但是我有这个错误：

Unexpected closing tag "section". 
It may happen when the tag has already been closed by another tag.

使用非闭合标签的 HTML 的可重复使用片段的最佳做法是什么？

Answer 1

不是这样的。

您只能使用一个标签来实现一种行为。

应该是这样的

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

HTML 无法理解两个不同的标签组成一个标签。所以如果HTML，最简单的标记语言都做不到，别指望Angulat能做到。

（如果我没弄对，非闭合标签与闭合标签相同，所以）

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

Answer 2

您可以创建

而不是使用未闭合的组件标签（这总是会引发错误）

单个组件，例如 myCustomComponent。
Inject/add 一个动态组件（my-dynamic-component，其中包含您的 html 内容）在 myCustomComponent

createComponent

createEmbeddedView

所以 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>

您可以关注了解更多详情。

Answer 3

我认为你的想法angular不正确。您应该始终使用结束标记，如果您需要将自定义内容传递给 component/route，则使用

<router-outlet></router-outlet>

或

<ng-content></ng-content>

(ng-content可以命名为在组件中使用multiply)

Angular 6: 如何让一个组件有非结束标签

Angular 6: how to have a component with non closing tags

tags

components

angular

angular6