css - Angular 在没有复制/粘贴代码的情况下渲染一个模板或另一个模板

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 中使用的变量，而且我绝对不想复制/粘贴代码。这只是我将如何根据 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 Stepper 和 Steps，则此方法将不起作用。原因是因为 Step 组件期望将祖先 Stepper 组件注入(inject)其中。由于您想要重用模板，因此它们必须超过 Steppers 的大小，因此您无法满足该注入(inject)要求。上面的方法在子组件期望父组件被注入(inject)的任何情况下都不起作用。

唯一的其他解决方案是为内容本身使用模板。因此，虽然重复步骤组件，但它们内部的表单不会重复。据推测，表格将成为内容的核心，因此不会有太多重复。

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