angular - 在孩子中使用父属性（高度，宽度）

Question

我正在使用材质对话框，需要将我的大小调整到对话框的边缘。我有什么（： 我需要什么（窗户的整个上部都被涂上了，而不仅仅是条带）：

我的解决方案不起作用：

export class DialogComponent implements AfterViewInit {

  @Input() parent : HTMLElement;
  dialogProperties = [];

  ngAfterViewInit(): void {
    this.dialogProperties['height'] = this.parent.clientHeight;
    this.dialogProperties['width'] = this.parent.clientWidth;
  }
}

<div fxLayout="column" fxLayoutAlign="space-between stretch" style="height: 100%; position: relative">
  <div class="title" mat-dialog-title>
    <h1 class="header-mat-dialog" [ngStyle]="{'width': dialogProperties['width'], 'height': dialogProperties['height']}" fxLayout="row" fxLayoutAlign="start center">Title</h1>
  </div>
  <div class="content" mat-card-content style="flex-grow: 1;">
  </div>
  <div class="bottom" fxFlex>
  </div>
</div>

.header-mat-dialog {
  text-align: center;
  display: flex;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: #01A4B1;
  color: white;
}

.title {;
  display: inline-block;
}

.content {
  display: inline-block;
}

.bottom {
  display: inline-block;
  vertical-align: bottom;
}

Answer 1

我以另一种方式决定：设置填充：0；对于mat-dialog-container。父组件：

openDialog(): void {
    this.dialog.open(DialogComponent, {
      width: '100%',
      height: '80%',
      restoreFocus: false,
      panelClass: "ref"
    });
  }

对话：

@Component({
  ...
  encapsulation: ViewEncapsulation.None
})

对话框.scss

.ref .mat-dialog-container {
  padding: 0;
}

它仍然为其他元素添加边距。

PS：我找到了不错的box-shadow样式并将其用于我的标题。

box-shadow:0 3px 3px -2px rgba(0, 0, 0, 0.2),0px 3px 4px 0px rgba(0, 0, 0, 0.14),0px 1px 8px 0px rgba(0, 0, 0, 0.12);