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

Question

我想为项目中的所有对话框设置滚动策略。我用

测试了一个对话的行为

@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我已经阅读了有关注入(inject) token MAT_DIALOG_SCROLL_STRATEGY 的信息。它可能应该是这样的:

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

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

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

这是一个示例项目:stackblitz

Answer 1

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

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

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