如何使用 MAT_DIALOG_SCROLL_STRATEGY 设置滚动策略

Tho*_*lik 3 angular-material angular

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

@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);
    }
}
Run Code Online (Sandbox Code Playgroud)

它按预期工作。在Angular Material上,我读到了有关注入令牌的内容MAT_DIALOG_SCROLL_STRATEGY。它可能应该是这样的:

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

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

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

这是一个示例项目:stackblitz

kve*_*tis 5

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

providers: [
    {
        provide: MAT_DIALOG_SCROLL_STRATEGY,
        useFactory: (scrollStrategyOptions: ScrollStrategyOptions) => scrollStrategyOptions.noop,
        deps: [ScrollStrategyOptions]
    }
]
Run Code Online (Sandbox Code Playgroud)

工厂在MAT_DIALOG_SCROLL_STRATEGY第一次请求时被调用。您可以定义工厂在deps属性中期望的依赖关系。