Angular 如何访问另一个视图及其'；通过角形入口在单独屏幕上显示s功能？

我有一个有很多组件的角度项目

我使用如下数组循环一个组件：

<body-chart *ngFor="..."></body-chart>

人体图表组件中：

全屏
我想在这里展示用上述代码编写的相同画布。。
当用户单击全屏时，它将从同一组件打开此模式。

如何使用该组件的标记（）在模态和其他屏幕中显示该组件的视图

有人知道吗？那么请在这里提一下

注: canvas标记由库管理，所以库会自动将一些div和canvas添加到我在dom中放置canvas标记和呈现动态UI的容器中。它也是互动的

我试着像这样使用ng模板和ng容器，但在ng容器中，我的画布无法与鼠标和其他东西交互

我所尝试的：

全屏

它将呈现我的模板的两个地方。在组件和模态中

但当模板在模态中呈现时，库动态添加的元素不能添加到模态中（非交互式画布）

我认为angular可能会一次性编译html tempalte，而不是在打开modal时编译。这就是为什么动态添加的元素不会在模式中呈现

我发现的另一个概念是角度门户： 我尝试将angular portal与templatePortal和component portal一起使用，但由于一些wierd错误而失败，如：无法从portal.js追加未定义的内容

有没有合适的方法来实现这种情况。

---

请帮助我。

要在多个位置显示单个内容，您可以利用

ng容器

和

ng模板

<ng-template #portal>
  <div>content...</div>
</ng-template>

<div class="place1">
  <ng-container *ngIf="!condition" [ngTemplateOutlet]="portal"></ng-container>
</div>

<div class="place2">
  <ng-container *ngIf="condition" [ngTemplateOutlet]="portal"></ng-container>
</div>

---

感谢您的回复，我尝试了您的解决方案，并且知道ngProjectAs不适用于此场景。

<ng-template #container>
<div>
    <canvas id="canvas"></canvas>
    <button (click)="openModal">Full screen</button>
</div>
</ng-template>
<ng-container *ngTemplateOutlet="container"></ng-container>
<modal>
    <ng-container *ngTemplateOutlet="container"></ng-container>
</modal>

<ng-template #portal>
  <div>content...</div>
</ng-template>

<div class="place1">
  <ng-container *ngIf="!condition" [ngTemplateOutlet]="portal"></ng-container>
</div>

<div class="place2">
  <ng-container *ngIf="condition" [ngTemplateOutlet]="portal"></ng-container>
</div>

<modal>
    <ng-container ngProjectAs="container" *ngTemplateOutlet="container"></ng-container>
</modal>