javascript - キャンバスがAngularのng-templateに表示されない

Question

私はAngular 8を使用しています

canvas親コンポーネント内の異なる子コンポーネントに表示する必要がある要素がありますが、そのデータは同じでなければなりません。

この状況を解決するために、次ng-contentのような子コンポーネントで使用しました

コンポーネントAとBには HTML が含まれています

<div class="child">
  <ng-content select=["canvasPreview]"></ng-content>
</div>

そして、ParentComponentは

 <mat-horizontal-stepper labelPosition="bottom" #stepper (selectionChange)="onSelectionChange($event)">

  <mat-step>
      <ng-template matStepLabel>Upload Image</ng-template>

      <app-upload-background-image
        [(previewImage)]="previewImage"
        (previewImageChange)="onPreviewImageChange($event)">
      </app-upload-background-image>

  </mat-step>

  <mat-step>
      <ng-template matStepLabel>Place Canvas A</ng-template>

      <app-a>
        <div canvasPreview *ngTemplateOutlet="canvas"></div>
      </app-a>
  </mat-step>

  <mat-step>
    <ng-template matStepLabel>Design Canvas B</ng-template>

    <app-b>
      <div canvasPreview *ngTemplateOutlet="canvas"></div>
    </app-b>
  </mat-step>

</mat-horizontal-stepper>

<ng-template #canvas>
   <app-canvas-child></app-canvas-child>
</ng-template>

app-canvas-childコンポーネントには要素canvasがあります

canvas-child.component.html

<div class="title">Canvas Success</div>

<canvas height="400" width="500">

ただし、親コンポーネントでは、コンポーネントからCanvas Successタイトルが表示されますapp-canvas-childが、キャンバス領域は空白です。親コンポーネントで直接（ng-templateの外部で）同じように使用すると、正常に機能し、キャンバスが表示されます。