Angular 6: как получить компонент с не закрывающими тегами - PullRequest
Новая
       12

Angular 6: как получить компонент с не закрывающими тегами

0 голосов
/ 17 мая 2018

Используя 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 многократного использования с незамкнутыми тегами?

Ответы [ 3 ]

0 голосов
/ 17 мая 2018

Вместо того, чтобы иметь незакрытые теги компонентов (которые всегда выдают ошибку), вы можете создать

  1. Один компонент, такой как myCustomComponent.
  2. Добавление / добавление динамического компонента (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>

Вы можете следовать этому ответу для более подробной информации.

0 голосов
/ 17 мая 2018

Я думаю, что ваше мышление не правильно в угловом смысле.Вы всегда должны использовать закрывающие теги, если вам нужно передать пользовательский контент в компонент / маршрут, тогда используйте 

<router-outlet></router-outlet>

или 

<ng-content></ng-content>

(ng-контент может быть назван для использования умножения вкомпонент)

0 голосов
/ 17 мая 2018

Так не работает.

Вы должны использовать только один тег для реализации поведения.

Это было бы что-то вроде этого 

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

HTML не может понять два разных тега, составляющих один. Поэтому, если HTML, самый простой язык разметки, не может этого сделать, не ждите, что это сделает Angulat.

(И если я не правильно понял, закрывающие теги такие же, как закрывающие, поэтому) 

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