Angular 在没有 copy/paste 代码的情况下渲染一个或另一个模板

Question

该问题的工作原理如下。我有一些代码实际上是这样工作的：

<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 是真还是假

如何在不复制 content2 代码的情况下实现这一点？

Posdata：我无法创建另一个组件来保存 content2 的内容，因为我需要在步进器内的 content1 中使用的变量，而且我绝对不想 copy/paste 编码.这只是我将如何根据 somevar 呈现内容的问题。

Answer 1

通常情况下，如果您不能使用组件，那么您可以使用模板和容器来多次显示相同的内容。

在下面的示例中，我将 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>

但是，如果您使用的是 angular material 步进器和步骤，则此方法将不起作用。原因是因为 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>

Answer 2

您还可以为您的步进器编写一个新的包装器组件，然后在属性上分支，无论它是垂直的还是水平的。

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

如果您运行在代码中比一次更频繁地遇到这个问题，这将是一个特别好的解决方案

Angular 在没有 copy/paste 代码的情况下渲染一个或另一个模板

Angular render one template or another on condition without copy/paste code

html

css

angular-ng-if

angular-material

angular