如何根据对话内容中使用的dropdown组件调整angular-material2 2的md- dialog -container的大小

npm install --save @angular/material @angular/cdk @angular/animations

import { MatSelectModule } from '@angular/material/select';
import { MatDialogModule } from '@angular/material/dialog';

@NgModule({
  imports: [
    // 其他模块导入
    MatSelectModule,
    MatDialogModule
  ],
  // 其他配置
})
export class AppModule { }

<md-dialog-container [ngStyle]="{ 'width.px': dialogWidth, 'height.px': dialogHeight }">
  <!-- 对话框内容 -->
</md-dialog-container>

import { Component } from '@angular/core';

@Component({
  selector: 'app-dialog',
  templateUrl: './dialog.component.html',
  styleUrls: ['./dialog.component.css']
})
export class DialogComponent {
  dialogWidth: number;
  dialogHeight: number;

  onDropdownChange(value: string) {
    // 根据dropdown的选择值来调整对话框大小
    if (value === 'small') {
      this.dialogWidth = 300;
      this.dialogHeight = 200;
    } else if (value === 'medium') {
      this.dialogWidth = 500;
      this.dialogHeight = 300;
    } else if (value === 'large') {
      this.dialogWidth = 700;
      this.dialogHeight = 400;
    }
  }
}