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
您需要使用接受依赖项的工厂:
providers: [
{
provide: MAT_DIALOG_SCROLL_STRATEGY,
useFactory: (scrollStrategyOptions: ScrollStrategyOptions) => scrollStrategyOptions.noop,
deps: [ScrollStrategyOptions]
}
]
Run Code Online (Sandbox Code Playgroud)
工厂在MAT_DIALOG_SCROLL_STRATEGY第一次请求时被调用。您可以定义工厂在deps属性中期望的依赖关系。
| 归档时间: |
|
| 查看次数: |
4293 次 |
| 最近记录: |