如何检测 Angular2 中的变量变化

2023-11-25

我有以下配置对象,它是在构造函数运行之前设置的:

config: Object = {
     onSlideChangeEnd : function(slide:any) {
          this.currentSlideIndex = slide.activeIndex;
     }
};

我想通知服务有关更改,问题是设置配置后该服务尚不可用:

 constructor(private user: UserService,
             private layout: LayoutService) {
 }

我如何通知服务此变量更改?


嗯,正如建议使用 Observables 一样,这并不是一个很大的麻烦,而且效果很好。实际上不超过几行。

在一些公共服务中声明它们共享相同的服务,例如在该模块中声明为提供者的服务,这样您就不会得到同一服务的两个实例。添加一个Subject该服务和发出值的方法:

public configObservable = new Subject<number>();

emitConfig(val) {
  this.configObservable.next(val);
}

在组件中您需要设置配置:

emit(val) { // your value you want to emit
  this.myService.emitConfig(val);
}

然后在需要的地方订阅该值:

constructor(private myService: MyService) {
  this.myService.configObservable.subscribe(value => {
    this.value = value;
  })
}

在父子交互中使用上面的代码进行工作:

Plunker

至于你的评论@Input(),这在父组件与子组件交互时效果很好,因此在这种情况下这对您来说并不适用。

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

如何检测 Angular2 中的变量变化 的相关文章

  • ViewChild 与 Angular 中的输入/输出相比,有什么缺点或功能差异吗?

    我正在阅读有关 Angular ViewChild 的内容并与输入 输出参数进行比较 只是好奇 Viewchild 是否有任何缺点 或者无法做一些输入 输出可以做的事情 看来 ViewChild 是首选路线 因为所有参数现在都位于 Type
  • 如何在显示 Angular 网站之前加载图像

    我一直在用 Angular 做一个网站 我需要在显示之前加载所有图像 我试图找到一种方法来制作预加载视图 直到所有图像都位于 assets文件夹已加载 但我找不到任何东西 我怎样才能在 Angular 中正确地做到这一点 我可以给你两个选项
  • 用 Angular 6 进行业力测试

    我正在尝试使用 npm 运行角度测试 ng test 但问题是 chrome 在测试完成后启动而不停止 所以我使用了 ng test watch false 但这会导致错误 Chrome 69 0 3497 Linux 0 0 0 ERRO
  • Angular-CLI 全局 scss 变量

    如何在最新的 Angular CLI 使用 webpack 中添加全局 scss 变量 看起来在 styles scss 中定义的全局变量在组件样式中不可用 它们需要通过相对路径导入到组件的 SCSS 文件中 这将允许编译器找到处理所需的父
  • 如何重命名对象中的字段

    我正在使用 Angular 5 我有 假后端 项目数组 我的情况 我正在等待以下对象结构 id number title string 但是 后端向我发送了错误的结构 id number name string 我需要从后端接收数据 如果字
  • 获取对组件树上某种类型的所有指令的引用

    我有一个复杂的场景 需要帮助 我有一个指令 称为TagDirective 它被放置在我的应用程序中的多个元素上 我有另一个指令 QueryDirective 需要引用的所有实例TagDirective存在于其宿主元素以及层次结构中其上方的所
  • 批处理文件运行 npm start

    我有一个角度应用程序 可以使用命令启动npm start在控制台中 现在我想创建一个批处理文件 在启动时执行 npm install 这是我创建的批处理文件 前端 bat cd
  • 从 SERVICE 执行 COMPONENT 方法

    我正在尝试执行一个组件method from a 服务方式 我看到了另外 2 个线程 Link1 如何从服务调用组件方法 https stackoverflow com questions 40788458 how to call comp
  • NX MFE 角度模块联盟无法访问远程微前端

    我有一个 shell 和两个使用 NX 模块联合的 MFE 即 机构 a and home b 它托管在不同的子域中 我在尝试访问时遇到问题 My 模块联合 manifest json agency https a abc maindoma
  • Angular - 当服务价值发生变化时更新组件价值

    我有多个组件 在 NgFor 循环中 调用相同的服务 我想要的是 当一个组件更改同一服务中的值时 该新值会被发送到调用该服务的每个组件 并随后更新组件变量中的该值 我希望这是有道理的 如果您需要更多信息 请告诉我 代替BehaviorSub
  • 如何将参数传递给 JHipster 中的自定义错误消息?

    我仍在学习 JHipster 所以今天我想自己进行一些验证练习 并尝试向我的前端发送有意义的错误消息 这是我尝试过的 在我的控制器中 我有以下内容 POST lessons Create a new lesson of 45 min if
  • 如何让 Angular2 在渲染组件之前等待承诺

    第一 是的 我事先用谷歌搜索过这个 并且solution https stackoverflow com questions 34731869 wait for angular 2 to load resolve model before
  • 并行运行 Angular 和 AngularJS 框架

    我找到了描述如何将 Angular 2 组件集成到 AngularJS 中的资源 但所有这些都涉及像 Angular 项目一样设置 AngularJS 项目 需要 TypeScript 的转译器 需要 ES6 需要 import 语句 我想
  • 角 2 材料容器固定不工作

    我对 CSS 和 Angular 2 材质有疑问 任何固定定位元素的行为都不像固定在 md sidenav container 内 如果它不在容器内 则它可以正常工作 这是该问题的链接 只需将 md toolbar 复制并粘贴到容器内部 您
  • 角度2 $routeChangeStart , $routeChangeSuccess ,$routeChangeError

    在 Angular2 中 这些 Angular1 事件的等价物是什么 routeChangeStart routeChangeSuccess routeChangeError 我想在根应用程序组件中使用这些事件来处理任何路线更改 提前致谢
  • 如何在 RxJS 中“等待”两个可观察值

    在我的应用程序中我有类似的东西 this personService getName id concat this documentService getDocument subscribe response gt console log
  • 聚合物纸下拉菜单在浏览器中未正确呈现

    我对简单的纸张下拉菜单的渲染 html 遇到问题 列表项并不显示为样式化的 菜单 而只是出现在页面上的项目列表 单击渲染的纸张输入组件 渲染的下拉列表的一部分 确实会为波纹设置动画 但不会为菜单和菜单项的显示 隐藏设置动画 单击列表中的某个
  • 如何使用 Angular 2 实现拖放(v2.0.0-beta.15)

    我想以角度实现一个简单的拖放列表 例如我可以更改其顺序的杂货列表 iv 在使用之前实现它https github com akserg ng2 dnd https github com akserg ng2 dnd但我的问题是我使用角度2
  • Angular 1 到 Angular 5(导入嵌套组件)

    Before 角度1 5 用户界面路由器 Now 角5 0 如何在像 Angular 1 5 这样的组件父组件中导入子组件 我从 Angular 5 开始制作教程 Heroes 但没有解释这个过渡 所有组件都导入到 app modole t
  • 在 Angular 2 中的 for...of 指令中获取索引

    到目前为止 有没有办法获取可迭代对象的当前索引for ofAngular 2 中的指令 换句话说 相当于 index在 Angular js v1 中 代码示例 ul li index task label li ul 当然这段代码不起作用

随机推荐

  • ASP.Net MVC 6 中的全局错误日志记录

    我正在测试 MVC 6 Web Api 并希望实现登录到全局错误处理程序 只是保证没有错误会在没有被记录的情况下离开系统 我创建了一个 ExceptionFilterAttribute 并将其全局添加到启动中 public class Ap
  • Angular2 http 重试逻辑

    我有一个带有基于令牌的身份验证机制的 API 成功登录后 我在浏览器的本地存储中存储两个令牌 访问令牌和刷新令牌 访问令牌包含在服务器端授权用户所需的所有必要信息 并且具有到期日期 当访问令牌过期时 客户端可以使用刷新令牌请求新的访问令牌
  • 如何使用新线程库中的 Task.Wait For Any?

    尝试使用Delphi中的线程库并行计算任务并使用TTask WaitForAny 为了得到第一个计算结果 偶尔会出现异常停止执行 异常时的调用堆栈 第一次机会例外 价格为 752D2F71 美元 异常类 EMonitorLockExcept
  • TextView 中的整数值

    如何在 TextView 中显示整数值 当我尝试时 出现错误android content res Resources NotFoundException String resource ID TextView tv new TextVie
  • 如何在Java 8中逐行读取文件?

    在Java 8中 我看到Files类中添加了名为lines 的新方法 该方法可用于在Java中逐行读取文件 它适用于大文件吗 我的意思是我们可以加载前 1000 行 然后加载第二组 1000 行吗 我有 1GB 的大文件 可以吗 有人可以分
  • 狮身人面像和“你的意思是……?”建议想法。它会起作用吗?

    我正在尝试想出最快的方法来提出搜索建议 起初我认为 Levenstein UDF 函数与 mysql 表相结合就可以完成这项工作 但是使用 levenshtein mysql 必须遍历表中的每一行 大量的单词 这会使查询非常慢 现在我最近安
  • 如何用等角透视进行渲染? [复制]

    这个问题在这里已经有答案了 可能的重复 使用opengl进行真正的等角投影 我想使用 Blender3d 使用的相同等距渲染进行渲染 我该怎么做 是否可以仅调用 glMultMatrix 我尝试谷歌搜索 但找不到任何可以导致这种渲染模式的工
  • Kotlin 中默认构造函数中的两个附加类型?

    自从我一直在使用kotlin 反射为了调用我的默认值和声明的构造函数 我看到了第二个不同的构造函数 我意识到两个不同的领域int arg3 and kotlin jvm internal DefaultConstructorMarker a
  • Visual Studio 2015 中的 TFS 生成资源管理器在哪里?

    我在 Windows 8 上运行 Visual Studio Enterprise 2015 RTM 在 Visual Studio 2013 中 构建资源管理器位于团队资源管理器 gt 构建 gt 操作 gt 管理队列中 Visual S
  • Typescript 泛型中对接口成员的约束

    我有一个方法 应该接受任何对象 只要它的所有字段都是字符串或数字 我做了这个 它非常适合鸭子打字 static interpolateParams route string params key string string number s
  • 一个很好的 C 随机数生成器

    我需要一个好的随机数生成器来用于我用 C 编写的程序 如果您感兴趣的话 它是一个分形火焰生成器 尽管我过去使用相同的算法取得了成功 但我的图像仍然非常粗糙 我最终意识到 区别在于我使用的随机数生成器 令人难以置信的是 它产生了巨大的变化 我
  • Linq 查询适用于 null 但不适用于 int?在 where 子句中

    我有一个像 简化的 的 linq 查询函数 public IList
  • Windows Phone 8.1 位置跟踪

    我想实现一个将设备位置持续发送到网络服务的应用程序 查看文档 我发现了 Geolocation 类和一些讨论位置跟踪的文章 如何持续跟踪 Windows Phone 8 手机的位置 如何在 Windows Phone 8 后台运行位置跟踪应
  • java中如何调整文本大小

    我发现在 Photoshop 中 只需拖动文本即可轻松调整文本大小 我们如何在 Java 中做同样的事情 关于如何在java中调整文本大小有什么想法吗 添加了在 Photoshop 中调整大小的字母 A 的快照 请让我知道这段代码有什么问题
  • 如何使用 XPath 获取属性的值

    我一直在使用 Selenium WebDriver 进行测试 并且一直在寻找 XPath 代码来获取 HTML 元素的属性值 作为回归测试的一部分 但我找不到一个好的答案 这是我的示例 html 元素 div class firstdiv
  • 如何实现android视频播放器全屏播放

    我已经实现了android视频播放器 但我不需要像这样我需要什么意思当我打开活动时我需要支付视频半屏在中心当我点击按钮全屏按钮然后我需要全屏支付 如何实现它帮助我 视频播放器活动 public class VideoPlayerActivi
  • 如何在intellij idea编辑器中删除顶行面包屑?

    我在弄清楚 IntelliJ Idea Community Edition 15 中的此显示栏时遇到问题 有谁知道这是什么和 或如何将其关闭 它被称为当前代码位置的面包屑菜单 例如 在您的图像中 您处于类 Display gt 方法 Dis
  • 通过 JDBC 集成 Spark SQL 和 Apache Drill

    我想根据使用 Apache Drill 对 CSV 数据 在 HDFS 上 执行查询的结果创建 Spark SQL DataFrame 我成功配置了 Spark SQL 使其通过 JDBC 连接到 Drill Map
  • 如何将 JSON 格式的数据从 WebView 传递到 HTML 页面

    我正在尝试将 JSON 格式的数据从 Android WebView 传递到 HTML 页面 但是 每当我尝试解析原始 JSON 数据时 应用程序就会崩溃 我希望其格式为 key data 我的应用程序的目标是解释此 JSON 数据 将其形
  • 如何检测 Angular2 中的变量变化

    我有以下配置对象 它是在构造函数运行之前设置的 config Object onSlideChangeEnd function slide any this currentSlideIndex slide activeIndex 我想通知服