Угловая визуализация того или иного шаблона при условии без копирования / вставки кода - PullRequest
Новая
       14

Угловая визуализация того или иного шаблона при условии без копирования / вставки кода

0 голосов
/ 04 октября 2018

Вопрос работает следующим образом.У меня есть некоторый код, который на самом деле работает так: 

<content1>
    <mat-horizontal-stepper *ngIf="somevar" >
        <content2></content2>
    </mat-horizontal-stepper>
    <mat-vertical-stepper *ngIf="!somevar" >
    <content2></content2>
    </mat-vertical-stepper>
</content1>

Я имею в виду, content2 всегда одинаков, но mat-stepper вертикальный или горизонтальный, если somevar имеет значение true или false

Как я могудостичь этого без копирования кода content2?

Posdata: Я не могу создать другой компонент для хранения содержимого content2, так как мне нужны переменные, которые я использую в content1 внутри степпера, и я нене хочу копировать / вставлять код абсолютно.Это только вопрос того, как я буду отображать контент в зависимости от somevar.

Ответы [ 2 ]

0 голосов
/ 04 октября 2018

Вы также можете написать новый компонент-обертку для своих степперов, который затем разветвляет свойство, вертикальное или горизонтальное. 

<mat-stepper [orientation]="somevar ? 'horizontal' : 'vertical'">
  <content2></content2>
</mat-stepper>

, а mat-stepper выглядит как 

<ng-container *ngIf="orientation === 'horizontal'; else vertical">
  <mat-horizontal-stepper>
    <ng-content>
  </mat-horizontal-stepper>
</ng-container>
<ng-template #vertical>
  <mat-vertical-stepper>
    <ng-content>
  </mat-vertical-stepper>
</ng-template>

это особенно хорошее решение, если вы сталкиваетесь с этой проблемой чаще в своем коде, чем один раз

0 голосов
/ 04 октября 2018

Обычно, если вы не можете использовать компонент, вы можете использовать шаблон и контейнеры для многократного отображения одного и того же контента.

В приведенном ниже примере я заменил элементы container-2 на ng-container компоненты.В другом месте я добавил компонент ng-template и поместил container-2 в контент.Наконец, я связываю их, помещая директивы *ngTemplateOutlet в контейнеры и передавая им ссылку на шаблон с помощью переменной шаблона. 

<content1>
  <mat-horizontal-stepper *ngIf="somevar" >
    <ng-container *ngTemplateOutlet="content2Template"></ng-container>
  </mat-horizontal-stepper>
  <mat-vertical-stepper *ngIf="!somevar" >
    <ng-container *ngTemplateOutlet="content2Template"></ng-container>
  </mat-vertical-stepper>
</content1>
<ng-template #content2Template>
  <content2></content2>
</ng-template>

Однако этот метод не будет работать, если вы используетеугловой материал Stepper и Steps.Причина в том, что компоненты Step ожидают, что в него будет введен компонент-предок Stepper.Поскольку вы хотите повторно использовать шаблоны, они должны быть больше, чем Steppers, поэтому у вас нет возможности удовлетворить эти требования к инъекции.Описанный выше метод не будет работать в любой ситуации, когда дочерний компонент ожидает, что родительский объект будет введен.

Единственным другим решением было бы использование шаблонов для самого содержимого.Таким образом, пока компоненты шага повторяются, формы внутри них не будут.Предположительно, формы будут основой содержания, поэтому повторений не будет. 

<mat-vertical-stepper> *ngIf="somevar" 
  <mat-step label="Step 1" >
    <ng-container *ngTemplateOutlet="Content1"></ng-container>
  </mat-step>
  <mat-step label="Step 2">
    <ng-container *ngTemplateOutlet="Content2"></ng-container>
  </mat-step>
</mat-vertical-stepper>
<mat-horizontal-stepper>
  <ng-template #tmplt let-stepper *ngIf="!somevar">
    <mat-step label="Step 1" >
      <ng-container *ngTemplateOutlet="Content1"></ng-container>
    </mat-step>
    <mat-step label="Step 2">
      <ng-container *ngTemplateOutlet="Content2"></ng-container>
    </mat-step>
  </ng-template>    
  <ng-container *ngTemplateOutlet="tmplt"></ng-container>
</mat-horizontal-stepper>
<ng-template #Content1>Content1</ng-template>
<ng-template #Content2>Content2</ng-template>
...