我正在编写一个组件，它接受@Input()中的TemplateRef，并将其呈现在组件中的某个位置.模板出现在容器div中，该容器div具有不一定与模板的纵横比匹配的给定宽度和高度.我的目标是拉伸(扭曲)模板以适应容器.
<div class="box-content box-background box-template-container">
<ng-container *ngTemplateOutlet="boxTemplate; context: { box: box }">
</ng-container>
</div>
我在SCSS中找到了使其发挥作用所必需的东西:
.box-template-container {
> ::ng-deep * {
transform-origin: top left;
transform: scale(1, 2);
}
}
问题是，只有当容器的高度是模板的两倍时，这才有效，所以我需要以某种方式使2动态.这就是我正在寻找但又找不到的东西.挑战是::ng-deep部分，比例值是我可以在函数中计算的东西.
有没有人知道怎么做，或者知道更好的方法？
我创造了一个Stackblitz来证明