Angular 2 库配置

2024-01-31

目前我正在尝试创建我的第一个 Angular 2 库,即翻译管道。现在我正在尝试让开发人员能够将带有翻译的对象插入到模块中,以便管道可以使用它。

如何将某种配置/对象插入到我的库中,以便我的所有组件、管道和服务都可以使用它?

我的图书馆看起来像:

index.ts

import { NgModule, ModuleWithProviders } from '@angular/core';
import { CommonModule } from '@angular/common';

import { TranslatePipe } from './translate.pipe';

export * from './translate.pipe';

@NgModule({
    imports: [
        CommonModule
    ],
    declarations: [
        TranslatePipe
    ],
    exports: [
        TranslatePipe
    ]
})
export class TranslateModule
{
    static forRoot(): ModuleWithProviders
    {
        return {
            ngModule: TranslateModule,
            providers: []
        };
    }
}

翻译.pipe.ts

import { Injectable, PipeTransform, Pipe } from '@angular/core';

@Pipe({
    name: 'translate'
})

@Injectable()

export class TranslatePipe implements PipeTransform
{

    public translations: any = null;

    constructor ()
    {
        this.translations = {};
    }

    transform(key: string): string
    {
        let translation = key;

        if (key in this.translations) translation = this.translations[key];

        return translation;
    }
}

我的测试项目:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';

import { TranslateModule } from 'translate-pipe';

@NgModule({
    declarations: [
        AppComponent,
        TranslateModule
    ],
    imports: [
        BrowserModule,
        FormsModule,
        HttpModule
    ],
    providers: [
        TranslateModule
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

只需让用户将配置对象传递给forRoot()方法,然后将其设置为服务

import { InjectionToken } from '@angular/core';

export const TRANSLATE_CONFIG = new InjectionToken();

export interface TranslateConfig {
  someProp?: string;
  anotherProp?: string;
}

export class TranslateModule {

  // config is optional. You can use configure default below
  static forRoot(config?: TranslateConfig) { // <========
    const conf = createConfig(config); // maybe set some defaults

    return {
      ngModule: TranslateModule,
      providers: [
        { provide: TRANSLATE_CONFIG, useValue: conf }
      ]
    }
  }
}

然后无论你需要注入配置,只需(在你的管道中)

import { Inject } from '@angular/core';
import { TranslateConfig, TRANSLATE_CONFIG } from './wherever';


constructor(@Inject(TRANSLATE_CONFIG) config: TranslateConfig) {}

用户会做

imports: [
  TranslateModule.forRoot({
    someProp: someValue,
    anotherProp: anotherValue
  })
]
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Angular 2 库配置 的相关文章

  • 不和谐机器人 |不和谐.js |类型错误:无法读取未定义的属性“长度”

    我正在制作一个 Discord 机器人 并且正在使用 CodeLyon 的视频作为参考 该错误位于我的 message js 文件中 该文件包含以下内容 require dotenv config create cooldowns map
  • 为什么 JavaScript base-36 转换看起来不明确

    我目前正在编写一段使用 Base 36 编码的 JavaScript 我遇到了这个问题 parseInt welcomeback 36 toString 36 看来要回归了 welcomebacg 我在 Chrome 开发者控制台和 Nod
  • 尝试将布尔 C# 变量传递给 javascript 变量并将其设置为 true

    在我的 aspx 页面中 我将布尔变量 C 传递给需要布尔类型的 javascript 函数 但遇到了问题 但是 C 变量返回 True 而 javascript 不喜欢大写 myjavascript 如果我将 c 变量转换为字符串 那么我
  • 我想检查 $('#td1').text() === "x" 是否?

    我想检查innerHtml是否有X或O 所以我不能再次添加任何其他东西 但它不起作用 添加检查代码后它就停止了 我在这里尝试做一个简单的XO游戏来更熟悉javascript和jquery 我也不确定是否可以用 jQuery 做到这一点
  • jQuery AJAX 调用 Java 方法

    使用 jQuery AJAX 我们可以调用特定的 JAVA 方法 例如从 Action 类 该 Java 方法返回的数据将用于填充一些 HTML 代码 请告诉我是否可以使用 jQuery 轻松完成此操作 就像在 DWR 中一样 此外 对于
  • Google App Engine:修改云运行环境

    我正在尝试部署一个使用自定义 Node js 服务器的 Next js 应用程序 我想将自定义构建变量注入应用程序 next config js const NODE ENV process env NODE ENV const envTy
  • 如何抑制窗口鼠标滚轮滚动...?

    我正在开发嵌入页面中的画布应用程序 我有它 因此您可以使用鼠标滚轮放大绘图 但不幸的是 这会滚动页面 因为它是文章的一部分 当我在 dom 元素上滚动鼠标滚轮时 是否可以阻止鼠标滚轮在窗口上滚动 附加鼠标滚轮 不是 Gecko DOMMou
  • 如何监听 jQuery AJAX 请求?

    以下两种实现 ajaxRequest 1 2 的方法应该是等效的 话说回来 为什么验证回调已执行的单元测试 3 在 1 中成功而在 2 中失败 我应该如何重写测试 3 来监视 2 中的成功回调 如果我尝试stub jQuery ajax使用
  • 从未用 @flow 标记的导入文件中获取类型定义

    TL DR我怎么告诉flow从未声明的导入模块导入类型定义 flow 加长版 流接缝能够从不使用流语法的文件中派生类型 请参阅示例 示例文件 flow js if Math random lt 0 5 var y hello else va
  • 为什么是 javascript:history.go(-1);无法在移动设备上工作?

    首先 一些背景 我有一个向用户呈现搜索页面 html 表单 的应用程序 填写标准并单击 搜索 按钮后 结果将显示在标准部分下方 在结果列表中 您可以通过单击将您带到新页面的链接来查看单个结果的详细信息 在详细信息页面中 我添加了一个 返回结
  • MVC 在布局代码之前执行视图代码并破坏我的脚本顺序

    我正在尝试将所有 javascript 包含内容移至页面底部 我正在将 MVC 与 Razor 一起使用 我编写了一个辅助方法来注册脚本 它按注册顺序保留脚本 并排除重复的内容 Html RegisterScript scripts som
  • 提交表单并重定向页面

    我在 SO 上看到了很多与此相关的其他问题 但没有一个对我有用 我正在尝试提交POST表单 然后将用户重定向到另一个页面 但我无法同时实现这两种情况 我可以获取重定向或帖子 但不能同时获取两者 这是我现在所拥有的
  • Laravel 中只向登录用户显示按钮

    如果我以 John 身份登录 如何才能只显示 John 的红色按钮而不显示 Susan 的红色按钮 测试系统环境 Win10 Laravel5 4 Mysql5 7 19 table class table table responsive
  • 为 illustrator 导出脚本以保存为 web jpg

    任何人都可以帮我为 illustrator CC2017 编写一个脚本 将文件以 JPG 格式导出到网络 旧版 然后保存文件并关闭 我有 700 个文件 每个文件有 2 个画板 单击 文件 gt 导出 gt 另存为 Web 旧版 然后右键文
  • HTML 离线应用程序缓存,列出下载的文件

    作为我正在构建的离线 Web 应用程序的加载屏幕的一部分 使用缓存清单 http developer apple com library safari documentation iPhone Conceptual SafariJSData
  • 模块构建失败(来自 ./node_modules/babel-loader/lib/index.js)Vue Js

    我从 GitHub 下载了一个我和我的朋友正在开发的项目 但是当我尝试运行时 npm run serve 我收到这个错误 src main js 中的错误 Module build failed from node modules babe
  • 条件在反应本机生产中失败,但在开发中有效

    我创建了一个反应本机应用程序 我需要通过它进行比较 如果属实 就会执行死刑 问题是 该条件适用于 React Native 开发模式 而不适用于 React Native 生产版本 我使用 firebase 作为数据库 也使用 redux
  • 如何仅在最后一个
  • 处给出透明六边形角度?
  • 我必须制作这样的菜单 替代文本 http shup com Shup 330421 1104422739 My Desktop png http shup com Shup 330421 1104422739 My Desktop png
  • 将 MQTTNet 服务器与 MQTT.js 客户端结合使用

    我已经启动了一个 MQTT 服务器 就像this https github com chkr1011 MQTTnet tree master例子 该代码托管在 ASP Net Core 2 0 应用程序中 但我尝试过控制台应用程序 但没有成
  • 导致回发到与弹出窗口不同的页面

    我有一个主页和一个详细信息页面 详细信息页面是从主页调用的 JavaScript 弹出窗口 当单击详细信息页面上的 保存 按钮时 我希望主页 刷新 是否有一种方法可以调用主页的回发 同时还可以从详细信息页面维护保存回发 Edit 使用win

随机推荐

  • 将 Numpy 数组保存为图像

    我有一个 Numpy 数组类型的矩阵 我如何将它作为图像写入磁盘 任何格式都可以 png jpeg bmp 一个重要的限制是 PIL 不存在 Using PIL https pillow readthedocs io en stable 保
  • 适用于多个目的地和单个来源的 iOS MKDirections

    我的应用程序需要从一组 10 个步行点中获取距离用户 最近 的步行点 我已经看到 MKDirections 使用 calculateDirectionsWithCompletionHandler 针对单个源 目标位置执行此操作 我的问题是
  • 每 x 秒调用一次函数(Python)[重复]

    这个问题在这里已经有答案了 我想每 10 秒调用一个函数 实际上 它是一个 Web API 但该函数可能需要随机 t 秒才能返回 假设 t 为 0 1 至 1 0 秒 我们能想到的最简单的代码是 while True func take t
  • Docker BuildKit --mount=type=cache 不起作用,为什么?

    我正在尝试实施Buildkit 的缓存挂载功能 https github com moby buildkit blob master frontend dockerfile docs experimental md run mounttyp
  • 多个源代码存储库

    我使用 Mercurial 对源代码进行版本控制 但有些人更喜欢其他版本控制系统 如 git Bazaar SVN CVS 我想知道 是否可以同时将一个存储库存储在多个系统下 以便人们可以使用他们想要的任何存储库 GitHub 开发了hg
  • Nginx 无法加载 CSS 和 JS 文件(MIME 类型错误)?

    我的网站上出现以下错误 Error There are multiple templates named velvet Each template needs a unique name 1b1a247fc034d5089f331ec954
  • 如何在 Angularjs 中使用 $event 更新事件点击时的 ng-model

    http plnkr co ywhmyO http plnkr co ywhmyO 我尝试过编译和指令 但一无所获 示例中的编译代码是直接从 Angular 网站上撕下来的 但我不知道如何使用它 非常感谢任何指导 你被这样的事实绊倒了ng
  • 如何在类图中显示单例关系

    如果一个类包含指向单例类的指针 它可以是aggregation 据我了解 这不可能是has a关系 因为该类不会创建单例类的实例 它只是像这样使用它association关系 标题并不像所写的那样100 完全有意义 有单例类 但没有真正的单
  • 以编程方式设置 GoogleMapOptions

    我像这样膨胀我的片段 GoogleMap map MapFragment getFragmentManager findFragmentById R id MapFragment map Fragment getMap 在这里我有我的选择
  • Lambda 日志和 CloudWatch PutLogEvents 限制

    I know Lambda 调用PutLogEvents在内部记录消息 CloudWatch 有限制PutLogEvents PutLogEvents 每个日志流每秒 5 个请求 我想知道 Lambda 日志流也可以被限制吗PutLogEv
  • Javascript 将 unicode 字符串转换为“标题大小写”

    我有一个 javascript 大小写转换问题 由于非英文字母 我无法解决该问题 我主要关心的是土耳其字母 我需要做的是这样的 你好世界 gt 你好世界 你好世界 gt 你好世界 你好世界 gt 你好世界 这是我到目前为止所取得的成就 St
  • Rails + Rspec + 机架 + 会话测试

    Gemfile 文件 机架 gt 1 6 0 我在将会话变量从 rspec 测试传递到 Rack 中间件时遇到了一些问题 我在互联网上浏览了很多文章 但没有任何解决方案可以帮助我理解 所以基本上我希望能够在我的中间件类中做到这一点 req
  • Grizzly / Glassfish - 无法建立 websockets 握手

    我正在尝试让 WebSockets 在 Grizzly Glassfish 之上工作 我已经克隆了示例 WebSockets 聊天应用程序 http java net projects grizzly sources git show sa
  • realloc() 旧大小无效

    我正在做 K R C 编程书中的一个练习 该程序用于从用户输入的一组行中找到最长的行 然后打印它 这是我写的 部分内容直接摘自书中 include
  • 将值插值作为属性组件

    我有一个关于 Angular2 中的插值是如何完成的问题 例如 我有组件 X 其值为 Input 在父组件中我有这样的代码
  • 如何在保持纵横比的同时将 div 包含在视口内

    存在一个正方形 div 其宽度为任意百分比 并且高度相同 需要随窗口缩放 它必须保持在视口的范围内 即 不剪裁到外部 并保持其正方形形状 本质上是复制background size contain CSS 的特性 我需要支持iOS Safa
  • 什么是 Java EE? [复制]

    这个问题在这里已经有答案了 我意识到它的字面意思是 Java 企业版 但我要问的是 这到底意味着什么 当公司需要 Java EE 经验时 他们真正需要的是什么 有使用 EJB 的经验吗 有 Java Web 应用程序经验吗 我怀疑这对不同的
  • 无法解码 JSON 对象:期望值:第 1 行第 1 列(字符 0)

    这个问题有点重复 但我找不到解决方案 当我调用 Flask 应用程序并传递 JSON 数据时 出现错误 Failed to decode JSON object Expecting value line 1 column 1 char 0
  • 以特定方式将 String 转换为 NSAttributedString

    所以我有一个看起来像这样的字符串 Swift VisualBasic Ruby i wanna convert this string to something like this 基本上我想在单个单词后面创建一个背景 是的 我可以使用 N
  • Angular 2 库配置

    目前我正在尝试创建我的第一个 Angular 2 库 即翻译管道 现在我正在尝试让开发人员能够将带有翻译的对象插入到模块中 以便管道可以使用它 如何将某种配置 对象插入到我的库中 以便我的所有组件 管道和服务都可以使用它 我的图书馆看起来像