Angular 如何通过ts文件4调整模态的大小

我想根据TS文件而不是全局SCSS文件来调整模式的大小

有一个简单的代码，您可以通过全局SCSS文件调整模式的大小

HTML文件

TS文件：

导出类主页{
构造函数（专用modalController:modalController）{}
onModal（）{
此.dynamicPreview（“动态模式”）；
}
异步动态查看（信息：任意）{
const myModal=等待this.modalController.create({
组件：DynamicModalPage，
cssClass:“动态模式”，
组件和支柱：{
文福：信息，
}
});
return wait myModal.present（）；
}
}

全局SCSS文件：

.dynamicModalCss{
左：0；
右：0；
排名：0；
底部：0；
位置：绝对位置；
包含：严格；
显示器：flex；
证明内容：中心；
对齐项目：居中；
.模态包装器{
宽度：20雷姆；
高度：40雷姆；
}
}

我不知道该怎么做：(

---

感谢您的建议和帮助

定制模式的唯一方法是使用css类

您可以在每个组件scss文件上创建类，而不是在global.scss文件中创建类

因此，根据您在相应的scss文件中设置的内容，每个组件将具有不同的模态宽度和高度

必须使用的属性是css4属性：-宽度，-高度

home.component.scss文件

.my-modal {
  --width: 100px;
  --height: 50px;
}

.my-modal {
  --width: 100px;
  --height: 50px;
}

另一个.component.scss文件

.my-modal {
  --width: 100px;
  --height: 50px;
}

.my-modal {
  --width: 100px;
  --height: 50px;
}