Angular 7.1.4 HTML Избегайте вставки копий для реструктуризации

Question

Итак, у меня есть мой HTML, который выглядит так:

<div>
    <div>Lots of stuff that only appears in this component #1</div>
    <div>Lots of stuff that only appears in this component #2</div>
    <div>Lots of stuff that only appears in this component #3</div>
    <div>Lots of stuff that only appears in this component #4</div>
</div>

И в настоящее время я работаю над CSS и версткой, но это означает, что я постоянно реструктурирую DOM:

<div>
    <div>
        <div>Lots of stuff that only appears in this component #1</div>
        Lots of stuff that only appears in this component #2
        <div>Lots of stuff that only appears in this component #3</div>
        Lots of stuff that only appears in this component #4
    </div>
</div>

Или что-то в этом роде.

Я смотрел на ng-template, но, похоже, он работает только с ngIf и ngSwitch.

Что мне действительно нужно, так это то, что мне не нужно переписывать весь контент каждый раз, когда происходит изменение макета. Кстати, предположим, что я не могу создать новый компонент и переместить его в этот новый компонент.

<div>
    <div copyFrom="#1"></div>
    <div>
        <div copyFrom="#2"></div>
        <div copyFrom="#3"></div>
    </div>
    <div copyFrom="#4"></div>
</div>
<div no-display name="#1">Lots of stuff that only appears in this component #1</div>
<div no-display name="#2">Lots of stuff that only appears in this component #2</div>
<div no-display name="#3">Lots of stuff that only appears in this component #3</div>
<div no-display name="#4">Lots of stuff that only appears in this component #4</div>

Есть ли способ сделать это, чтобы мне не нужно было копировать и вставлять содержимое, и я могу просто скопировать и вставить ссылку на содержимое?

Я использую Angular 7.1.4.

Просто потому, что я понятия не имею, что вам может понадобиться, чтобы помочь мне, вот результат ng --version:

Angular CLI: 7.1.4
Node: 11.6.0
OS: darwin x64
Angular: 7.1.4
... cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.11.4
@angular-devkit/build-angular     0.11.4
@angular-devkit/build-optimizer   0.11.4
@angular-devkit/build-webpack     0.11.4
@angular-devkit/core              7.1.4
@angular-devkit/schematics        7.1.4
@angular/animations               7.2.0
@angular/cdk                      7.2.1
@angular/fire                     5.0.2
@angular/flex-layout              7.0.0-beta.23
@angular/material                 7.2.1
@ngtools/webpack                  7.1.4
@schematics/angular               7.1.4
@schematics/update                0.11.4
rxjs                              6.3.3
typescript                        3.1.6
webpack                           4.23.1

Спасибо!

Answer 1

Вы ищете NgTemplateOutlet

<div>
  <ng-container *ngTemplateOutlet="template1"></ng-container>
    <div>
      <ng-container *ngTemplateOutlet="template2"></ng-container>
      <ng-container *ngTemplateOutlet="template3"></ng-container>
    </div>
  <ng-container *ngTemplateOutlet="template4"></ng-container>
</div>

<ng-template #template1> ... </ng-template>
<ng-template #template2> ... </ng-template>
<ng-template #template3> ... </ng-template>
<ng-template #template4> ... </ng-template>