angular - 如何以角度提供和注入功能?
问题描述
我有我需要在任何组件中注入的功能:
export const matDialogCallbacks = (dialog: MatDialog, document: Document, renderer: Renderer2) => {
dialog.afterOpened.subscribe(() => renderer.addClass(document.body, 'overflow-hidden'));
dialog.afterAllClosed.subscribe(() => renderer.removeClass(document.body, 'overflow-hidden'));
};
我需要注入它并使用:
constructor(private matDialogCallbacks: matDialogCallbacks, private dialog: MatDialog) {
matDialogCallbacks(dialog);
}
怎么做?
我做了服务:
import { Injectable, Inject, Renderer2 } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { DOCUMENT } from '@angular/common';
@Injectable({
providedIn: 'root',
})
export class DialogEventsService {
constructor(@Inject(DOCUMENT) private document: Document, private renderer: Renderer2) {}
init(dialog: MatDialog) {
dialog.afterOpened.subscribe(() => this.renderer.addClass(this.document.body, 'overflow-hidden'));
dialog.afterAllClosed.subscribe(() => this.renderer.removeClass(this.document.body, 'overflow-hidden'));
}
}
当我尝试在组件中使用此服务时,我得到以下信息:
NullInjectorError: R3InjectorError(OrdersDistributionModule)[DialogEventsService -> DialogEventsService -> Renderer2 -> Renderer2 -> Renderer2]:
解决方案
定义函数类型:
type dialogCB= (dialog: MatDialog, document: Document, renderer: Renderer2) => void
现在的功能:
export const matDialogCallbacks :dialogCB = (dialog: MatDialog, document: Document, renderer: Renderer2) => {
dialog.afterOpened.subscribe(() => renderer.addClass(document.body, 'overflow-hidden'));
dialog.afterAllClosed.subscribe(() => renderer.removeClass(document.body, 'overflow-hidden'));
};
现在创建一个令牌:
import { InjectionToken } from '@angular/core';
export const TOKEN_NAME = new InjectionToken<dialogCB>('dialog callback');
现在在根模块中提供它:
providers: [{ provide: TOKEN_NAME, useValue: matDialogCallbacks }]
最后你可以注入它:
constructor(@Inject(TOKEN_NAME) private matDialogCallbacks: dialogCB, private dialog: MatDialog) {
matDialogCallbacks(dialog);
}
推荐阅读
- python - 如何将所有图像从不同的 12 个文件夹复制到一个文件夹?
- swiftui - 如何将 zstack 的对齐展开为顶部和底部?
- visual-studio-code - 使用左 Ctrl 和左 Shift 分配键盘快捷键的问题
- android - Android studio 拍照并保存
- react-native - 二维码扫描后获取数据到输入框
- azure - 限制创建违反 Azure 安全策略的 Web 应用和功能应用
- r - 如何使用 r 中的 topicmodels 将多个文档组合成一个文档?
- javascript - 循环遍历数组对象以获取和显示值
- sql - 使用存储过程的最后一行中的单个值插入新行
- sqlite - 有什么好的方法可以将字节码直接传递给 sqlite3 吗?