将动态对象传递给角度模块的 forRoot()

2024-01-12

我正在使用该包ngx-cookieconsent它将模块导入为:

const cookieConfig: NgcCookieConsentConfig = { "cookie": { "domain": "localhost" }, ... "theme": "block", "content": { "policy": "Cookie Policy" } }; ... @NgModule({ imports: [ NgcCookieConsentModule.forRoot(cookieConfig) ]

但是,配置上的域属性将在运行时设置,因此我不能将其定义为常量。为了解决这个问题,我做了以下工作:

创建了一个ConfigurationService获取配置并存储它:

@Injectable()
export class ConfigurationService {

  private configuration: IServerConfiguration;

  constructor(private http: HttpClient, @Inject('BASE_URL') private baseUrl: string) { }

  loadConfig() {
    return this.http.get<IServerConfiguration>(this.baseUrl + 'Configuration')
      .pipe(
        tap(config => {
          this.configuration = <IServerConfiguration>(config);
        })
      )
      .toPromise();
  }

  public domain(): string {
    return this.configuration.domain;
  }
}

这被设置为APP_INITIALIZER这样首先调用配置:

export function loadConfiguration(configService: ConfigurationService) {
  return () => configService.loadConfig();
}

...
 providers: [
    ConfigurationService,   
    {
      provide: APP_INITIALIZER,
      useFactory: loadConfiguration,
      multi: true,
      deps: [ConfigurationService]
    }],

然后创建一个类来使用配置创建我的 cookieConsentOptions 对象:

@Injectable()
export class CookieConstentService {

  cookieDomain: string;

  constructor(configService: ConfigurationService) {
    this.cookieDomain = configService.domain();
  }

  get cookieConstentOptions(): NgcCookieConsentConfig {
    return {
      "cookie": {
        "domain": this.cookieDomain
      },
      "position": "top-right",      
      "content": {
        "message": "This website uses cookies to ensure you get the best experience on our website."
      }
    };
  }

Issue

我已经在 configService 和 CookieConstentService 之间设置了依赖关系,这样我只有在拥有配置值时才创建 cookie 选项。

但是,我不确定如何将动态值传递给.forRoot()一个模块的。我应该能够做到cookieConsentService.cookieConstentOptions()获取该对象,但我不确定在哪里实例化该对象以在模块导入中使用。它需要依赖项,因此不能自己创建一个新实例。

任何想法如何有效地将方法注入到第三方模块中forRoot()?

Thanks


发布这个问题后我了解到该对象传递到forRoot()方法本质上是一个单例,所以如果我在初始化之前设置任何值,那么它将使用它。我实现这个的方法是:

  1. 使用常量/默认设置创建选项的实例(这些设置在环境之间不会改变):
import { NgcCookieConsentConfig } from "ngx-cookieconsent";

export const cookieConsentOptions: NgcCookieConsentConfig  =
{
  "cookie": {
    "domain": "not-set"
  },
  "position": "bottom-right",
  "theme": "block",
  "palette": {
    "popup": {
      "background": "#df1010",
      "text": "#ffffff",
      "link": "#ffffff"
    },
    "button": {
      "background": "#ffffff",
      "text": "#000000",
      "border": "transparent"
    }
  },
  "type": "info",
  "content": {
    "message": "This website uses cookies to ensure you get the best experience on our website.",
    "dismiss": "Got it!",
    "deny": "Refuse cookies",
    "link": "Learn more",
    "href": "/cookie-policy",
    "policy": "Cookie Policy",
    "target": "_self"
  } 
};

Add an APP_INITIALIZER到注入的appModuleNgcCookieConsentConfig目的。这将传入上面创建的对象:

...
{
      provide: APP_INITIALIZER,
      useFactory: cookieConfigFactory,
      deps: [HttpClient, NgcCookieConsentConfig, ConfigurationService],
      multi: true
    },
...
  1. 并创建上面使用的方法:
export function cookieConfigFactory(http: HttpClient, config: NgcCookieConsentConfig, configService: ConfigurationService) {
  return () => configService.loadConfig().then(x => config.cookie.domain = x.domain)
}

我从自定义配置服务中获取 cookie 域的值,因此为什么要注入它,您的可能会有所不同。

  1. 最后在 appModules 的模块导入中,导入 CookieConsent 模块,传入第一步创建的对象:
NgcCookieConsentModule.forRoot(cookieConsentOptions)
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

将动态对象传递给角度模块的 forRoot() 的相关文章

  • Angular 6 http.delete 请求不起作用

    我似乎无法让我的删除请求发挥作用 我已经完成了所有的获取请求 但现在我被困在删除上 似乎无法理解它 console log 的 URL 始终正确 并且删除请求通过 Postman 工作正常 有什么想法吗 HTML
  • 从版本 14 更新到 15 后,Angular $localize 错误

    从版本更新我们的 Angular 应用程序后14 0 4到版本15 1 3 之前也尝试过15 1 2 我们在尝试访问该应用程序时收到以下错误 Uncaught Error It looks like your application or
  • 循环遍历字符串数组 - angular2

    然而非常基本的事情 但我无法弄清楚如何在 angular2 中的 html 模板中显示字符串数组 html ul li number li ul ts this numberOptions I II III IV V VI VII VIII
  • 如何使用 TypeScript 和 Angular 2 将插件添加到 ng2-ckeditor ?

    我正在尝试添加Justify插件到我的 ckeditor 但不幸的是我找不到任何关于如何将插件添加到 ng2 ckeditor 的信息 另外 我找不到任何应该添加插件的目录或配置文件 我正在使用 ng2 ckeditor1 0 6使用 Ty
  • 在 Angular 6 中将多个值传递给管道

    我需要使用管道在 Angular 6 中创建一个搜索表单 并且必须将多个参数传递给管道 nameSearch emailSearch roleSeach accountSearch tr tr 这是我的烟斗 Pipe name search
  • Angular 2:当我通过浏览器刷新时发生404错误[重复]

    这个问题在这里已经有答案了 我已将单页应用程序存储在服务器中名为 myapp 的文件夹中 我已将库中的 URL 更改为http example com myapp http example com myapp 60 我的项目有两个页面 所以
  • 自定义 django-rest-framework-simplejwt 的 JWT 响应

    我正在设置 Django 来发送 JWT 响应而不是视图 我尝试使用 django rest framework simplejwt 这个框架中提供了一个函数TokenObtainPairView as view 返回一对 jwt 我需要使
  • Angular:DOM更新后调用方法

    我正在从 html 调用一个方法 调用休息服务 来增加 减少屏幕上的计数 现在我想调用另一个方法 即 getThreshold 来检查计数是否达到阈值 如果是 我想显示一条确认消息 我想首先更新屏幕上的计数 然后调用该函数来检查它是否达到阈
  • Angular Mat Select 多重选择更改查找哪个选项已更改

    我有一个
  • 如何在 angularjs 4 中设置 http 调用超时?

    我在 angularjs 4 官方页面上看到过 https angular io guide http https angular io guide http 设置http调用超时但我没有找到任何参考 有人尝试过设置吗 谢谢 如果您使用 R
  • 是否可以在运行时动态设置组件@Input?

    说我有一个dynamic component wrapper可以实例化任何Component传递给它的类 DRE013 DCOOKE 16 05 2017 The component to instantiate Input compone
  • 元素上的 *ngIf 和 *ngFor [重复]

    这个问题在这里已经有答案了 我遇到的情况是 我需要在同一元素上使用 ngIf 和 ngFor 指令 我在 stackoverlow 上找到了很多答案 但没有一个适合这种情况 我有一个表 在其中循环对象数组并在标题中动态写入单元格 table
  • angular2-google-maps 自动完成功能不起作用

    我正在尝试使用 angular2 google maps 将自动完成功能添加到我的项目中 我在 AppModule 中添加 AgmCoreModule forRoot 带有库 places 然后在组件中添加自动完成代码 我仍然收到 无法读取
  • Angular2:setTimeout仅调用一次

    我正在 Angular2 中实现需要使用的功能setTimeout My code public ngAfterViewInit void this authenticate loop private authenticate loop s
  • 如何将 zingchart 实现到 Angular2 中

    我有一个现有的项目 我想在其上实施 zingcharts 我尝试了 3 个不同的教程 主要来自 https blog zingchart com 2016 07 19 zingchart and angular 2 charts back
  • 从父组件调用的子组件内的 Angular 2 ng2-bootstrap 模式

    很难解释这一点 我有一个简单的 ng2 bootstrap 模式示例 我将其扩展为包含主页的 Boostrap 4 Jumbotron 示例模板 现在 ng2 bootstrap 模式不执行任何操作 我可以看到this childModal
  • Angular4 屏蔽输入中的字符而不更改其值

    如何屏蔽输入中除 Angular 4 中最后四个字符之外的所有字符 即显示 而不更改实际值 例如 输入文本框中的数字应类似于 1234 且值应为 7671234 使用指令 Directive selector stringHide expo
  • 在 Angular html 模板中访问常量枚举

    假设我有一个常量枚举 export const enum MyConstEnum Value1 Value1 Value2 Value2 Value3 Value3 现在我想在我的 Angular 模板中使用它 span This has
  • 在指令中动态添加 *ngIf

    如何动态地将 ngIf 添加到用属性指令修饰的元素 为了一个简单的实验 我尝试了这个 Directive selector lhUserHasRights export class UserHasRightsDirective implem
  • Angular 模板验证表单

    我正在研究表单验证 我正在使用模板驱动的验证表单 其编码如下 现在工作正常 但是当我尝试添加时 username ngModel and password ngModel 在创建验证类的输入中 它向我显示一个错误 也请找到该错误 div c

随机推荐

  • 反序列化Bson文件

    我有一个用 mongodump 工具生成的 Bson 文件 我想在 C 代码中反序列化 为此 我似乎可以使用 mongodb C 驱动程序或 Json net 库 我尝试了它们 但我无法让它们工作 使用 Json net 库 input 是
  • MySQL Sum() 多列

    我有一张学生记分卡表 这是桌子 subject mark1 mark2 mark3 markn stud1 99 87 92 46 stud2 studn 现在 我需要对每个学生的总分进行求和 我通过使用得到它sum mark1 mark2
  • MySQL 数据透视表列数据作为行

    我正在努力寻找解决这个 MySQL 问题的方法 我似乎不知道该怎么做 我有以下表格 Question table id question 1 Is it this 2 Or this 3 Or that Results Table id u
  • android 使用外部 java 库时出现 java lang verifyerror

    我在我的 android 项目中使用外部库 在调用导入该库的类时出现 javalang verify 错误 它是 java jxl 库 请提供帮助我在库项目中创建了一个名为 lib 的目录 然后在库中引用它 这个库与原始的 Android
  • .NET 中的全局变量(或替代方案)最佳实践

    在 VB NET WinForms 应用程序中存储全局变量的最佳实践是什么 例如 当用户登录应用程序时 您可能希望存储一个可以在整个应用程序中访问的 CurrentUser 对象 您可以将其存储为模块中的对象 或者创建一个包含所有所需全局变
  • 如何使用 Javascript 滚动到底部时附加更多行

    It s in 共享点2010年 但我认为它可能会正常运行 1 默认情况下 每页的项目限制为 30 因此 我已经完成了在页面加载时显示 30 行的列表 然后我将鼠标向下滚动到底部 它隐藏了最后 10 行 Summary 页面加载 30 行
  • ToList 方法不适用于 TrackableCollection

    我们正在 EF 4 0 之上与可跟踪实体合作 为了删除实体及其所有依赖实体 我正在编写一个通用的DeleteDependentEntities 以便从EntityManager 中的Delete 方法调用 我们不 或者不想 依赖于在数据库中
  • 从数据库字段中删除特殊字符

    我有一个包含数千条记录的数据库 我需要删除其中一个字段以确保它只包含某些字符 字母数字 空格和单引号 我可以使用什么 SQL 从整个数据库的该字段中删除任何其他字符 例如斜杠等 update mytable set FieldName RE
  • Angular 7 - 我是否创建了太多订阅?

    我想知道我的代码是否会造成内存泄漏 Context 我有一个应该显示 应用程序 对象的组件类 它具有过滤和分页功能 我创建了一个方法加载应用程序数据 其中我订阅到 向 Web 服务发出请求后返回的 Observable 该方法在初始化时被调
  • 如何配置 spring-kafka 忽略格式错误的消息?

    我们的 Kafka 主题之一存在问题 该主题被DefaultKafkaConsumerFactory ConcurrentMessageListenerContainer组合描述here http docs spring io spring
  • 如何在 Firebase Cloud Storage 上创建存储桶

    我是一名 python 开发人员 我们使用 GCS Google 云存储 来存储过去几个月的图像 这很好 但对于 Android 来说 它需要将所有存储桶导入 Firebase Cloud Storage FCS 才能访问它 我们不需要任何
  • MySQL 中的字段递增是原子操作吗?

    我正在制作一个网站 我想在标准 MyISAM 表中增加一个计数器 简化示例 UPDATE votes SET num num 1 如果多个连接执行相同的查询 这会导致问题吗 或者 MySQL 会处理它并锁定表或其他措施以确保不存在冲突吗 写
  • Android ListView 项目在滚动时重叠

    我已经实施了一个ListView在我的应用程序中使用自定义实现CursorAdapter 我的问题是 每当我快速滚动到列表底部 启动应用程序后 有时我会发现所有绘制的 ListView 项目都相互重叠 如果我向后滚动或触摸其中一项 它们就会
  • 为什么我的数组无法正确打印? [复制]

    这个问题在这里已经有答案了 我正在尝试使用下面的代码编写一个简单的程序来创建一个一维数组 然后您可以使用索引号调用一个值 我在用java questions tagged java and eclipse questions tagged
  • 如何计算带有集合的列表中项目的出现次数?

    假设我有一个List
  • 如何在不停止单元格选择动画的情况下重新加载 UITableView

    当用户点击某个单元格时 我想更新我的UITableView 包括这个被点击的单元格的内容 最简单的方法是更新内部参数然后调用 self tableView reloadData 然而 reloadData立即停止我点击的单元格的漂亮的蓝色
  • QString 到 unicode std::string

    我知道有很多关于转换的信息QString to char 但我仍然需要对这个问题进行一些澄清 Qt提供QTextCodecs 要转换QString 内部以 unicode 形式存储字符 QByteArray 允许我检索char 它表示某种非
  • 推送到 CI 服务器内的 GitLab 存储库(部署密钥)

    GitLab 有这个很好的 部署密钥 功能 对于 CI 服务器读取和提取对存储库的访问权限非常有用 因为它们通常不需要更多功能 但是 我需要创建一个标签并将其推送到存储库 以标记从 master 分支构建的每个版本 更具体地说 我有一个 J
  • 字符串操作。查找 2 个索引之间的字符串

    给定一个字符串 例如 500 个字符 我想在索引 400 和索引 430 之间选择一个字符串 怎么写这样的函数呢 Thanks Use the string Substring http msdn microsoft com en us l
  • 将动态对象传递给角度模块的 forRoot()

    我正在使用该包ngx cookieconsent它将模块导入为 const cookieConfig NgcCookieConsentConfig cookie domain localhost theme block content po