MatDialog-应该涵盖页面的特定部分

Question

我正在使用MatDialog并从效果中打开它。我想覆盖页面的特定部分。在此示例中，它不应覆盖边框所覆盖的区域。有可能吗？

https://stackblitz.com/edit/ngrx-dialog-effects-vj9qek

Answer 1

我们可以覆盖模式背景以在顶部保留特定的空间...我们通过在组件定义中引入样式来实现。

在您的existing stackBlitz中，将 app.component.ts 更改为：

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { Store, select } from '@ngrx/store';

import * as fromRoot from './reducers/';
import { OpenDialog } from './actions';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styles: [`
    ::ng-deep .cdk-overlay-backdrop { top: 64px; }
`]
})
export class AppComponent {
  animal: Observable<string>;

  constructor(private store: Store<fromRoot.State>) { 
    this.animal = this.store.pipe(select(fromRoot.getAnimalName))
  }

  openDialog() {
    this.store.dispatch(new OpenDialog());   
  }
}