首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

ng2-translate -在具有OnPush更改检测的组件中不更新翻译字符串

ng2-translate是一个用于Angular应用程序的国际化(i18n)库。它允许开发人员在应用程序中轻松地实现多语言支持。ng2-translate提供了一种简单的方式来管理和切换不同语言的翻译字符串。

在具有OnPush更改检测的组件中,ng2-translate默认情况下不会自动更新翻译字符串。这是因为OnPush更改检测策略会根据输入属性的引用是否发生变化来决定是否重新渲染组件。而ng2-translate的翻译字符串是通过管道(pipe)来实现的,而管道的输入属性是不可变的。

要在具有OnPush更改检测的组件中更新翻译字符串,可以使用ng2-translate提供的markForCheck方法。该方法可以通知Angular重新检查组件并更新视图。

以下是使用ng2-translate在具有OnPush更改检测的组件中更新翻译字符串的示例代码:

  1. 首先,在组件中导入ChangeDetectorRefTranslateService
代码语言:typescript
复制
import { Component, ChangeDetectorRef } from '@angular/core';
import { TranslateService } from 'ng2-translate';
  1. 在组件的构造函数中注入ChangeDetectorRefTranslateService
代码语言:typescript
复制
constructor(private translateService: TranslateService, private changeDetectorRef: ChangeDetectorRef) { }
  1. 在需要更新翻译字符串的地方,使用markForCheck方法:
代码语言:typescript
复制
updateTranslation() {
  // 更新翻译字符串
  this.translateService.get('translation.key').subscribe((translation: string) => {
    // 更新组件中的翻译字符串
    this.translationString = translation;

    // 通知Angular重新检查组件并更新视图
    this.changeDetectorRef.markForCheck();
  });
}

在上述示例中,updateTranslation方法通过translateService.get方法获取翻译字符串,并将其赋值给组件中的translationString变量。然后,使用markForCheck方法通知Angular重新检查组件并更新视图。

推荐的腾讯云相关产品:腾讯云云服务器(CVM)、腾讯云对象存储(COS)。

腾讯云云服务器(CVM)是一种可扩展的计算服务,提供了高性能、可靠稳定的云服务器实例,适用于各种应用场景。

腾讯云对象存储(COS)是一种安全、低成本、高可扩展性的云存储服务,适用于存储和处理各种类型的数据。

更多关于腾讯云云服务器和对象存储的详细信息,请访问以下链接:

腾讯云云服务器(CVM)产品介绍:https://cloud.tencent.com/product/cvm

腾讯云对象存储(COS)产品介绍:https://cloud.tencent.com/product/cos

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

详解ANGULAR2组件变化检测机制(对比ANGULAR1检测

因此执行变化检测时 ParentComponent 组件 name 属性,会传递到 ChildComponent 组件输入属性 text 。...变化检测策略 Angular 2 我们可以定义组件 metadata 信息时,设定每个组件变化检测策略。...也许你已经知道了,我们刚才 AppComponent 模型更新了,但视图却未同步更新原因。...: markForCheck() - 组件 metadata 如果设置了 changeDetection: ChangeDetectionStrategy.OnPush 条件,那么变化检测不会再次执行...我们看到 ngOnInit 钩子,我们通过 setInterval 定时器,每隔一秒钟更新计数值同时调用 ChangeDetectorRef 对象上 markForCheck() 方法,来标识该组件在下一个变化检测周期

2.9K90

AngularDart Material Design 屑 顶

关于OnPush注意事项:如果ItemRenderer不是纯函数并且具有可能以不同方式呈现相同项内部状态,则引用本身必须更改才能生效。 removable bool 屑是否可以拆除。...selectionModel SelectionModel  此组件控制选择模型。...Chip组件呈现在material-chips组件。 Inputs: hasLeftIcon bool  chip是否应显示自定义图标,默认为false。...如果ItemRenderer不是无状态,并且可能为同一输入项返回不同值,则ItemRenderer引用需要更新,否则将不会反映该更改。 提供时,它用于为芯片生成标签。...此模型不应用于渲染,不会反映更改。 除非removable设置为false,否则可以通过用户交互从模型取消选择chips。 value dynamic  要渲染数据模型。

75440
  • angular5面试题_大数据面试题

    依赖就是具有一系列功能服务(service), 应用程序各种组件和指令(derictives)可能需要服务功能。...脏值检测基本原理是存储旧数值,并在进行检测时,把当前时刻新值和旧值比对。若相等则没有变化,反之则检测到变化,需要更新视图。 angular2有了Zone.js。...表达式(以及表达式所调用函数)少写太过复杂逻辑 不要连接太长 pipe(往往 pipe里都会遍历并且生成新数组, pipe anglarJS(v1)叫做filter) 变化检测策略onPush...开发者可以根据场景来设置更加高效变化检测方式:onPushonPush策略,就是只有当输入数据引用发生变化或者有事件触发时,组件才进行变化检测。 NgFor应该伴随trackBy方程使用。...否则,每次脏值检测过程,NgFor会把列表里每一项都执行更新DOM操作。

    4.3K20

    Angular 重磅回归

    Nicoll 说,该框架改进主要体现在以下三个方面。我们有必要重新对它进行审视。 移除模块 Angular ,最小代码块不是组件,而是模块。...她补充说,支持 Angular 应用程序基础结构工具和依赖项仍在发展,只是还没有达到这种程度。 “我想说,一定要从组件删除模块,或者开发新组件或管道时不再使用它们。...添加信号 Nicoll 表示,Angular 正在添加信号,这为它“内置响应性原语”。信号将使开发人员能够轻松管理和响应应用程序更改。...她说:“使用可观察对象和 OnPush 代价可归结为 zone.js——很多 Angular 开发者提到它时都会做出呕吐表情或者胸前画十字——和变化检测。...像信号这样内置反应原语就没有这种代价。” 她补充说,就目前而言,未来 Angular 不会出现这种变化检测,这将缩短加载时间,提升应用程序性能,甚至提升开发速度。

    23620

    Angular开发实践(五):深入解析变化监测

    什么是变化监测 使用 Angular 进行开发,我们常用到 Angular 绑定——模型到视图输入绑定、视图到模型输出绑定以及视图与模型双向绑定。...首先我们需要知道是,对于每一个组件,都有一个对应变化监测器;即每一个 Component 都对应有一个changeDetector,我们可以 Component 通过依赖注入来获取到changeDetector...paramOneVal发生了改变) 检测 paramTwo 是否发生了改变:没有发生变化 最后,因为 DemoChildComponent 再也没有了叶子节点,所以变化监测将更新DOM,同步视图与模型之间变化...别着急,Angular 开发团队已经考虑到了这个问题,上述检测机制只是一种默认检测机制,Angular 还提供一种 OnPush 检测机制(设置元数据属性 changeDetection: ChangeDetectionStrategy.OnPush...OnPush 与 Default 之间差别:当检测到与子组件输入绑定值没有发生改变时,变化检测就不会深入到子组件中去。

    1.8K80

    Angular 17 有什么新功能?

    具有相同文档,但有一个新交互式教程, 还有一个游乐场,可以不安装任何东西情况下尝试 Angular (就像 Vue 或 Svelte 一样)。...许多情况下,它应该比以前性能更高。 还值得注意是,变化检测算法已得到改进,以便在使用信号时更加高效。...以前,在读取模板信号时,Angular 会标记组件 当信号更新时,它所有祖先都肮脏 (就像目前组件被标记为检查时所做那样)。...它现在更聪明了,只信号更新时将组件标记为脏,而不是它所有祖先。 它仍然会检查整个应用程序树, 但是算法会更快,因为某些组件将被跳过。...OnPush 我们还没有办法编写纯基于信号组件,不需要 ZoneJS, 但它最终应该会到来! styleUrls 字符串 修饰器 and 属性现在可以是字符串,而不是字符串数组。

    65430

    Angular2 脏检查过程

    本文中我将会深入讨论Angular 2 变更检测系统。 高层次概览 一个Angular 2 应用就是一颗组件树。 Angular 2 应用是一个反馈系统,变更检测是它核心。...默认情况下,变更检测会遍历组件每一个节点,看看是不是发生了变化,而且对于浏览器发出每一个事件都会进行一轮检测。...我们采用比较激进方式使用不可变对象,那么大多数时间里面,变更检测树里面大块地方都会处于禁用状态。 这一机制是如何实现并不重要。你只要把变更检测策略设置为OnPush就可以了。...最后,检测过程某个不确定地方,视图会被更新。这种系统非常难以debug。 如上面的例子所示,Angular 2 里面使用可观察对象不会出现这种问题。...,你没有必要这样做。你可以只应用里面的某个局部使用可观察对象(例如,某个巨大table里面),然后那个部分就可以获得巨大性能提升。

    2.6K80

    angular4实战(4)ngrx

    ChangeDetectionStrategy 组建变化检查策略,以上述代码为例,当为ChangeDetectionStrategy设置OnPush时,组件就不会一直进行脏检查了,而是当输入属性变化时...(前提是元数据设置了changeDetection: ChangeDetectionStrategy.OnPush) 在此设置基础下,想要启动策略,就需要返回新对象和数组。...而在本例,通过reducer返回是一个新值(一般是一个新对象),新值变化也会引起组件检查。...高中英语水平翻译一下:async这个管道,会返回订阅Observe ,promise对象最新值,当观察者发现值有改变时,就会触发组件检查策略,并且组件销毁时也会自动去取消订阅避免内存泄漏。...本例,如果把async这个过滤器取消的话,会造成一直loading,因为组件无法监听到控制loading值改变,也就无法更新视图了。

    1.1K30

    Angular v18 现已推出!

    如需直观概述,请务必查看我们发布活动视频:不断发展变化检测从历史上看,一个名为 zone.js 库负责触发 Angular 更改检测。该库具有许多开发人员体验和性能缺点。...如果没有区域,Angular 会将此检查限制为更少触发器,例如信号更新。此更改还包括一个具有合并功能新调度程序,以避免连续多次检查更改。...如果你组件与 Angular ChangeDetectionStrategy.OnPush 更改检测策略兼容,那么它们也应该与无区域兼容,这将使它们过渡无缝衔接!...,以插入 Angular 更改检测。...此更改将加快您 Angular CLI 安装时间。路由重定向作为函数为了处理重定向时实现更高灵活性, Angular v18 ,redirectTo 现在接受返回字符串函数。

    22610

    Angular学习(02)--Angular-CLI命令

    组件声明相应 declarations 列表。...先介绍第一种方式,使用命令时,加上一些选项配置: 选项配置 说明 --export=true|false 生成组件在对应模块文件,是否自动 exports 列表声明该组件好对外公开,默认值 false...--changeDetection=Default|OnPush 设置改变组件检测策略,默认 Default。...ng g directive 这个是创建指令命令,组件其实是指令一种,所以,上面介绍关于组件命令各种选项配置,指令这里也基本都可以使用,这里列举了,清楚相关默认文件来源后,不懂,去翻阅下就可以了...这种时候,就该来了解了解这个命令一些选项配置了,经过配置,它也可以达到类似 ng server 命令一样自动检测文件变更并增量更新部署,提高开发效率。

    2.6K10

    为什么大家都使用 Axios 而不是 Fetch

    这个比较过程,即“diffing”,允许React识别更新DOM所需最小操作数量。React.js理解Diffing算法因此,React引入了“key”属性,用于区分“map”渲染元素。...如果在tools状态开头添加了新元素,组件将重新渲染,包括所有的JSX。React会创建最新VDOM新副本,并将其与现有DOM进行比较,找出变化。然后只更新更改部分。...Strict Mode,React对于函数组件状态更新函数和effect hook执行了两次调用,以确保组件相同状态和props下输出保持不变。...这有助于检测问题,但只开发模式下执行,生产中执行。Strict Mode还警告有关弃用方法、使用遗留字符串ref API问题、意外副作用等警告。...是React生态系统确保代码质量并在开发阶段早期检测潜在问题重要工具。

    14500

    【技术圈】 React 16.13.0 发布、Firefox 将禁用 TLS 1.01.1

    新增 Render 期间某些更新警告 渲染期间,React 组件不应在其他组件引起副作用。 支持 setState 渲染期间调用,但仅针对同一 component。...此警告将帮助您查找由于意外状态更改导致应用程序错误。极少数情况下由于渲染而有意要更改另一个组件状态情况,可以将 setState 调用包装到 useEffect 。... 现在, React 检测到样式规则冲突并记录警告。要解决此问题,请勿 style 道具混合使用同一 CSS 属性简写版本和简写版本。...新增一些推荐使用字符串引用警告 字符串引用是一个旧旧式API,建议使用,以后将不推荐使用: (一般不要将 String Refs 与 Refs... React Portals 提供了一种很好将子节点渲染到父组件以外 DOM 节点方式。

    1.3K10

    Akka(24): Stream:从外部系统控制数据流-control live stream from external system

    与这些外界系统对接意思是另一个线程运行数据流可以接收外部系统推送事件及做出行为改变响应。...如果一个外界系统需要控制一个运行数据流功能环节GraphStage,首先必须在这个GraphStage内部构建一个控制函数,这样才能接触并更改GraphStage内部状态。...onPush()里extMessage最终会被当作流元素插入到数据流。...插入了一个正在运行数据流并在最后终止了这个数据流。 另外,一个GraphStage也可以被外界当作一种Actor来进行交流。...与上个例子一样,作为一个GraphStage内部函数,它可以使用、更新GraphStage内部状态。

    694100

    Change Detection And Batch Update

    本文作者:IMWeb 吴浩麟 原文出处:IMWeb社区 未经同意,禁止转载 前言 传统WEB开发,当与用户或服务器发生交互时,需要我们手动获取数据并更新DOM,这个过程是繁琐、易错。...如果仔细观察的话,你会发现上面的输出符合一个规律:React调用方法连续setState走是批量更新,此外走是连续更新。...$apply(); }); 小结 Angular1我们是直接操作数据,这个过程Angular1是感知不到,只能在某个点调用$apply进行脏值检测,所以默认就是批量更新。...设置了变化检测策略为OnPush组件走深度遍历,而是直接比较对象引用来决定是否更新UI。...async: false推荐用在生产环境 — vuejs.org 总结 自此我们分析了React、Angular1/2和Vue变化检测以及批量更新策略。

    3.3K40

    Change Detection And Batch Update

    本文作者:IMWeb 吴浩麟 原文出处:IMWeb社区 未经同意,禁止转载 前言 传统WEB开发,当与用户或服务器发生交互时,需要我们手动获取数据并更新DOM,这个过程是繁琐、易错。...如果仔细观察的话,你会发现上面的输出符合一个规律:React调用方法连续setState走是批量更新,此外走是连续更新。...$apply(); }); 小结 Angular1我们是直接操作数据,这个过程Angular1是感知不到,只能在某个点调用$apply进行脏值检测,所以默认就是批量更新。...设置了变化检测策略为OnPush组件走深度遍历,而是直接比较对象引用来决定是否更新UI。...async: false推荐用在生产环境 — vuejs.org 总结 自此我们分析了React、Angular1/2和Vue变化检测以及批量更新策略。

    3.7K70

    使用Webpack提升Vue.js应用程序4种方法(翻译

    本文翻译自,翻译技巧不太好,喜勿碰 : 4 Ways To Boost Your Vue.js App With Webpack 众所周知,webpack 是 开发 vue.js 单页面应用程序必备工具...但是,这些带有一个固有的问题:要么您HTML标记需要使用笨拙JavaScript字符串,要么您模板和组件定义必须位于单独文件,从而使其难以使用。...为了节省不必要服务器请求,我们可以每次文件内容更改更改其名称,以强制浏览器重新下载该文件。一个简单系统可以通过文件名后附加一个哈希来为文件名添加“指纹”: ?...image.png Common Chunks插件会发出“ chunkhash”,如果文件内容已更改,则将对其进行更新。...Vue.js实现此功能还需要异步组件,并且通过Vue Router变得更加容易。

    2.6K20

    db2 terminate作用_db2 truncate table immediate

    01003 从列函数参数消去 NULL 值。01004 字符串指定给具有较短长度另一字符串数据类型时被截断。01005 SQLDA 条目数不够。01007 未授予特权。...类代码 27:触发数据更改违例 SQLSTATE 值 含义27000 试图同一 SQL 语句中多次更改同一个表同一行。 类代码 28 无效权限规范 表 23....4274B XML 模式存储库未找到唯一 XSROBJECT。4274F 安全标号组件未定义组件元素。4274G 在给定安全标号所使用安全标号策略未定义安全标号组件。...4274B XML 模式存储库未找到唯一 XSROBJECT。 4274F 安全标号组件未定义组件元素。 4274G 在给定安全标号所使用安全标号策略未定义安全标号组件。...42821 更新或插入值与列兼容。 42823 从仅允许一列子查询返回了多列。 42824 LIKE 操作数不是字符串,或第一个操作数不是列。

    7.6K20

    【17】进大厂必须掌握面试题-50个Angular面试

    Angular,什么是字符串插值? Angular字符串插值是一种特殊语法,它在双花括号 {{}}中使用模板表达式来显示组件数据。它也称为小胡子语法。...使用此功能,用户可以根据自己要求更改依赖关系。 29.区分单向绑定和双向数据绑定。 单向数据绑定,无论何时更改数据模型,“视图”或“ UI”部分都不会自动更新。...第一个ngOnChanges之后,该挂钩在其生命周期中仅被调用一次。 ngDoCheck:每当调用给定组件更改检测器时,便会调用它。这使您可以为提供组件实现自己变更检测算法。...您可以使用以下任意一种来更新视图: ApplicationRef.prototype.tick():它将对整个组件树执行更改检测。...ChangeDetectorRef.prototype.detectChanges():它将在当前组件及其子组件上启动更改检测。 48.Angular解释ng-app指令。

    41.4K51

    听GPT 讲Istio源代码--pilot

    它接受组件名称和Istio配置规范(一个由键值对组成映射)作为参数,并返回一个布尔值,指示组件是否配置规范启用。...它接受一个配置规范作为参数,并返回一个字符串切片,其中包含启用组件名称。 这些函数共同提供了Istio处理组件配置功能,包括检查组件是否启用以及获取启用组件列表等。...DeleteFromSlicePtr:从给定Slice指针删除指定元素。 UpdateSlicePtr:更新给定Slice指针元素。...GetUpdateStatusStats函数:用于获取更新状态统计信息,包括成功总数、失败总数和重试总数等。 parseStats函数:用于从给定字符串解析出一组统计项。...它们通过创建不同类型连接(TCP、HTTP、Unix)并执行相应读写操作来检测目标服务状态。这些拨号器是Istio中用于监视服务健康状况重要组件之一。

    26240
    领券