Question

我正在使用angular-material中的dialog组件，我想在其中设置弹出对话框的样式。

我知道通过生成组件有一些内置的样式支持：

let dialogRef = dialog.open(MyDialogComponent, {
  height: '400px',
  width: '600px',
  panelClass: 'some-class'
});

但是这会导致样式定义在对话框组件样式和生成定义中分离。我想要做的是为这种类型的所有对话框调整对话框样式。一个合乎逻辑的步骤是在组件css上使用:host：

:host {
    width: 600px;
    padding: 0px;
}

Plunker来说明我的观点。

这有可能吗？

Answer 1

Plunker example

我添加了display: block

:host { /* This is not working as expected */
  width: 800px;
  padding: 0px;
  display: block;
}

并在PlunkerAppModule

中更改了此部分

  declarations: [DialogOverviewExample, DialogOverviewExampleDialog],
  bootstrap: [DialogOverviewExample],
  entryComponents: [DialogOverviewExampleDialog],
  providers: []
})

：角度材质对话框的主机选择器

1 个答案: