时间戳

首页 > 解决方案 > 如何使用 MAT_DIALOG_SCROLL_STRATEGY 设置滚动策略

angular - 如何使用 MAT_DIALOG_SCROLL_STRATEGY 设置滚动策略

问题描述

我想为项目中的所有对话框设置滚动策略。我测试了一个对话框的行为

@Component({
  selector: 'app-main',
  templateUrl: './main.component.html',
  styleUrls: ['./main.component.scss']
})
export class MainComponent {
    constructor(public dialog: MatDialog, private overlay: Overlay) {}

    showHelpDialog() {
        const dialogConfig = new MatDialogConfig();
        dialogConfig.scrollStrategy = this.overlay.scrollStrategies.noop();
        this.dialog.open(DialogComponent, dialogConfig);
    }
}

它按预期工作。在Angular Material上，我读过有关 injection token 的信息MAT_DIALOG_SCROLL_STRATEGY。它可能应该是这样的：

@NgModule({
    /* ... */
    providers: [
        {
            provide: MAT_DIALOG_SCROLL_STRATEGY,
            useValue: /* ??? */
        }
    ]
})
export class AppModule { }

但我不知道如何设置值。滚动策略可以@angular/cdk/overlay/scroll/scroll-stratey-options.ts在类中找到，ScrollStrategyOptions但成员函数是非静态的，我无法实例化对象，ScrollStrategyOptions因为我没有必要的构造函数参数。所以基本上我正在寻找一种方法来做类似的事情

@NgModule({
    /* ... */
    providers: [
        {
            provide: MAT_DIALOG_SCROLL_STRATEGY,
            useValue: ScrollStrategyOptions.noop()
        }
    ]
})
export class AppModule { }

这是一个示例项目：stackblitz

标签： angularangular-material

解决方案

您需要使用接受依赖项的工厂：

providers: [
    {
        provide: MAT_DIALOG_SCROLL_STRATEGY,
        useFactory: (scrollStrategyOptions: ScrollStrategyOptions) => scrollStrategyOptions.noop,
        deps: [ScrollStrategyOptions]
    }
]

MAT_DIALOG_SCROLL_STRATEGY首次请求时调用工厂。deps您可以在属性中定义工厂期望的依赖项。

推荐阅读