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

为什么我在NgOnInit中的服务一直被应用程序在单击按钮时调用?

在Angular中,NgOnInit是一个生命周期钩子函数,它在组件初始化完成后被调用。通常情况下,我们会在NgOnInit中进行一些初始化操作,比如获取数据、订阅事件等。

如果你的服务在NgOnInit中被应用程序在单击按钮时调用,可能是因为你在按钮的点击事件中调用了该服务的方法。请检查你的组件模板文件,确认是否在按钮的点击事件中调用了该服务的方法。

另外,如果你希望在NgOnInit中的服务只在组件初始化时被调用一次,而不是在每次点击按钮时都被调用,你可以将该服务的调用逻辑放在一个单独的方法中,并在NgOnInit中调用该方法。然后,在按钮的点击事件中,只调用该方法而不是直接调用服务。

以下是一个示例代码:

代码语言:txt
复制
import { Component, OnInit } from '@angular/core';
import { MyService } from 'path-to-my-service';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent implements OnInit {
  constructor(private myService: MyService) { }

  ngOnInit(): void {
    this.initializeService();
  }

  initializeService(): void {
    // 在这里调用你的服务方法
    this.myService.doSomething();
  }

  onClick(): void {
    // 在按钮的点击事件中,只调用初始化方法
    this.initializeService();
  }
}

在上面的示例中,NgOnInit中的服务只在组件初始化时被调用一次,而按钮的点击事件只调用初始化方法,而不直接调用服务。这样就可以避免在每次点击按钮时都调用服务的问题。

希望以上解答对你有帮助!如果你需要了解更多关于Angular或其他云计算领域的知识,请随时提问。

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

相关·内容

为什么客户端发送信息时候按发送按钮无法发到服务器端?

一、前言 前几天Python白银交流群【无敌劈叉小狗】问了一个Python通信问题,问题如下:大家能帮我看看为什么客户端发送信息时候按发送按钮无法发到服务器端?...具体表现就是点了发送但服务器收不到,如下图所示: 二、实现过程 这里【啥也不懂】给了一个指导,他当时赶车,电脑不太方便,让粉丝截图了代码,直接看图。这里提出来了几个怀疑点。...顺利地解决了粉丝问题。 如果你也有类似这种Python相关小问题,欢迎随时来交流群学习交流哦,有问必答! 三、总结 大家好,是Python进阶者。...这篇文章主要盘点了一个Python库下载失败问题,文中针对该问题,给出了具体解析和代码实现,帮助粉丝顺利解决了问题。...最后感谢粉丝【无敌劈叉小狗】提出问题,感谢【啥也不懂】给出思路,感谢【莫生气】等人参与学习交流。

13710

AngularDart 4.0 高级-生命周期钩子 顶

peek-a-boo存在以显示Angular如何按预期顺序调用钩子。 此快照反映用户单击“创建...”按钮然后单击“销毁...”按钮后日志状态。 ?...添加一个英雄会产生一个新英雄。 间谍ngOnInit记录该事件。 重置按钮清除英雄列表。 Angular从DOM移除所有英雄元素并同时销毁他们间谍指令。...Angular团队负责人Misko Hevery解释了为什么您应该避免使用复杂构造函数逻辑。 不要在组件构造函数获取数据。您不应该担心当在测试下创建或决定显示之前时新组件会尝试联系远程服务器。...OnDestroy 将清理逻辑放入ngOnDestroyAngular销毁指令之前必须运行逻辑。 这是通知应用程序另一部分组件将要销毁时间。 这是释放资源地方,不会自动收集垃圾。...当英雄或权力没有实质性变化时,它会向日志写入特殊消息,以便您可以看到DoCheck多次调用。 结果是高亮: ?

6.2K10
  • AngularDart4.0 英雄之旅-教程-07路由 顶

    由于路由器自己,首先将该包添加到应用pubspec: ? 并非所有的应用程序都需要路由,这就是为什么Angular路由器处于独立可选软件包原因。...构造函数中注入HeroService,并将其保存在一个专用_heroService字段调用服务来获取Angular ngOnInit()生命周期钩子英雄。...你已经完成了应用程序路由。 您没有向模板添加英雄详情链接,因为用户单击导航链接不是为了查看特定英雄; 而是点击一个英雄名字,不管名字是显示仪表板还是英雄列表。...所以路由参数值转换成一个数字。 添加HeroService.getHero() ngOnInit(),你使用了HeroService还没有的getHero()方法。...要在其他地方导航,用户可以单击AppComponent两个链接之一,或单击浏览器后退按钮

    17.6K30

    AngularDart 4.0 高级-HTTP 客户端 顶

    它从服务接收heroes并且列表展示它们.用户可以添加一个新Hero并且保存到服务端. 下面是应用程序UI: ? 此demo有一个单独组件, HeroListComponent....一个模板引用变量, newHeroName, 赋予(click)事件绑定存取输入框值. 当用户单击按钮, 单击处理程序传递输入值到addHero()方法. 单击处理程序清空输入框....始终将数据访问权委派给支持服务类。 虽然 在运行时组件创建之后立即请求heroes, 此请求 不在组件构造器内. 替而代之,请求ngOnInit生命周期钩子. 保持构造器简单。...当组件构造器很简单,组件更容易测试和调试,而所有真正工作(如调用远程服务器)都是由单独方法处理。...英雄列表组件方法, getHeroes() 和addHero(), 指定当异步方法调用成功或失败采取操作.

    9.7K10

    AngularDart4.0 英雄之旅-教程-08HTTP 顶

    在此页面,您将进行以下改进。 从服务器获取英雄数据。 让用户添加,编辑和删除英雄名字。 将更改保存到服务器。 您将教会应用程序对远程服务Web API进行相应HTTP调用。...现在是时候添加创建和删除英雄能力了。 更新英雄细节 尝试英雄详情视图中编辑英雄名字。 当你输入时,英雄名字视图标题中被更新。 但是,如果您单击后退按钮,更改将丢失。 更新之前没有丢失。...当应用程序使用模拟英雄列表,更新直接应用于单个应用程序范围共享列表英雄对象。 现在,您正在从服务器获取数据,如果您希望更改持续存在,则必须将其写回服务器。...刷新浏览器,更改英雄名称,保存更改,然后单击浏览器“后退”按钮。 现在应该继续进行更改。 添加加入英雄能力 要添加英雄,应用程序需要英雄名字。 您可以使用与添加按钮配对输入元素。...当用户搜索框输入一个名字,你会对这个名字过滤英雄进行重复HTTP请求。 首先创建HeroSearchService,将搜索查询发送到服务Web API。

    11K30

    浅谈Hooks&&生命周期(2019-03-12)

    ngOnInit()一个或多个数据绑定输入属性发生更改 之前和之后调用ngOnInit() Angular首次显示数据绑定属性并设置指令/组件输入属性后初始化指令/组件。...每次更改检测运行期间,ngOnChanges()和之后立即调用ngOnInit()。...unsafe 下面开始咱们今天主题Hooks。 Hooks React v16.7.0-alpha 第一次引入了 Hooks 概念, 为什么要引入这个东西呢?...渲染时候,这个 useState 调用都会被执行,useState 自己肯定不是一个纯函数,因为它要区分第一次调用(组件 mount )和后续调用(重复渲染),只有第一次才用得上参数初始值,...因为按钮单击正在修改状态,即组件useEffect 方法运行。

    3.2K40

    Angular 服务

    为什么需要服务 组件不应该直接获取或保存数据,它们不应该了解是否展示假数据。...getHeroes(): void {  this.heroes = this.heroService.getHeroes();}  ngOnInit 调用它 你固然可以构造函数调用 getHeroes...而是选择 ngOnInit 生命周期钩子调用 getHeroes(),之后交由 Angular 处理,它会在构造出 HeroesComponent 实例之后某个合适时机调用 ngOnInit。... HTTP 教程,你将会调用 HttpClient.get() 它也同样返回一个 Observable,它也会发出单个值,这个值就是来自 HTTP 响应体英雄数组...组件 ngOnInit 生命周期钩子调用 HeroService 方法,而不是构造函数。 你创建了一个 MessageService,以便在类之间实现松耦合通讯。

    3.3K70

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

    这也是为什么变化检测是快速 (相比于 Angular 1.x $digest)。基本上,每个组件可以几毫秒内执行数万次检测。因此你应用程序可以快速执行,而无需调整性能。...变化检测策略 Angular 2 我们可以定义组件 metadata 信息,设定每个组件变化检测策略。...AppComponent 组件 profile 对象 name 属性已经改变了,但页面名字内容却未同步刷新。...我们看到 ngOnInit 钩子,我们通过 setInterval 定时器,每隔一秒钟更新计数值同时调用 ChangeDetectorRef 对象上 markForCheck() 方法,来标识该组件在下一个变化检测周期...当复选框被选中,detach() 方法将被调用,之后组件及其子组件将不会被检查。当取消选择,reattach() 方法会被调用,该组件将会被重新添加到变化检测器树上。

    2.9K90

    angular面试题及答案_angular面试

    ngOninit:初始化指令或组件,angular第一次显示展示组件绑定属性后调用,该方法只会调用一次 ngDocheck:检测 ngAfterContentInit:当把内容投影进组件之后调用,...传统web技术,客户端请求一个web页面(HTML/JSP/asp),服务器返回资源(或HTML页面),客户端再次请求另一个页面,服务器用另一个资源响应。...当类初始化之后,构造函数会被调用 ngOnInit ngOnInit 是angularOnInit钩子实现,用来初始化组件。...是输入属性发生变化时候调用,并且ngOnInitngOnchanges执行之后才调用,而constructor是组件实例化时候就调用了,也就是说,constructor是取不到输入属性...6)如果应用程序较大,我会考虑延迟加载而不是完全捆绑应用程序。 27. 使用Angular好处 可以添加自定义directive. 优秀社区支持。 客户端和服务通讯非常便利。

    11.1K120

    如何从Windows切换到Linux

    如果您之前就一直考虑迁移到Linux事情,那么就是现在了。 ? 选择您发行版 与Windows和macOS不同,Linux并不只有一个版本。...探索Linux发行版乐趣是很多人业余爱好一部分,但是如果是您首次安装,您可能会想要一些对初学者友好东西,因此需要可以轻松获得帮助。这就是为什么建议从Linux Mint开始原因。 ?...这下这些基本操作就非常熟悉了:单击左下角按钮以查看应用程序,从底部任务栏管理窗口等等。但是,Linux某些功能与Windows功能有所不同,其中应用程序是最大。 ?...Windows可能以管理员身份调用)运行该命令,apt是Linux Mint软件包管理器名称,而update确保可用应用程序列表最新。...对于图形工具,单击右下角shield图标,这将打开Update Manager应用程序。然后,您可以单击“Install Updates“按钮所有软件。 ?

    3.9K31

    Angular开发实践(八): 使用ng-content进行组件内容投射

    但是当我们点击按钮进行切换操作,demo-child-component初始化完成!...就不再打印了,这意味着我们 demo-child-component 组件只实例化了一次 - 从未被销毁和重新创建。 为什么会出现这样情况呢?...其中唯一方法就是查看第三方库代码,了解它们内部处理逻辑。将组件生命周期被绑定到我们应用程序组件而不是包装器意义是,开发者可以掌控计数器只实例化一次,而不用了解第三方库内部代码。...性能原因 更为重要。因为 ng-content 只是移动元素,所以可以在编译完成,而不是在运行时,这大大减少了实际应用程序工作量。... 此时,我们点击按钮进行切换操作

    2.9K81

    AngularDart4.0 英雄之旅-教程-06服务

    您可能会试图构造函数调用getHeroes()方法,但构造函数不应包含复杂逻辑,特别是调用服务构造函数(如数据访问方法)。 构造函数用于简单初始化,如将构造函数参数连接到属性。...当组件实现该方法,Angular会在适当时候调用它。 “Lifecycle Hooks”页面详细了解生命周期挂钩。...将OnInit添加到由AppComponent实现接口列表,并使用里面的初始化逻辑编写一个ngOnInit()方法。 Angular会在正确时间调用它。...英雄服务返回一个Future Future代表未来计算或值。 使用Future,您可以注册回调函数,计算完成(结果准备就绪),或需要报告计算错误时调用。 这是一个简单解释。...AppComponent激活,您使用ngOnInit生命周期挂钩来获取英雄数据。 您将HeroService定义为AppComponent提供者。

    2.9K10

    Angular 英雄编辑器

    应用程序现在有了基本标题。 接下来你要创建一个新组件来显示英雄信息并且把这个组件放到应用程序外壳里去。 创建英雄组件 使用 Angular CLI 创建一个名为 heroes 新组件。...CSS 元素选择器 app-heroes 用来父组件模板匹配 HTML 元素名称,以识别出该组件。...ngOnInit 是一个生命周期钩子(lifecycle hook),Angular 创建完组件后很快就会调用 ngOnInit。这里是放置初始化逻辑好地方。...你可以编辑英雄名字,并且会看到这个改动立刻体现在这个输入框上方  。 声明 HeroesComponent 每个组件都必须声明(且只能声明)一个 NgModule 。...打开 src/app/app.module.ts 你可以顶部找到 HeroesComponent 已经导入过了。

    2.6K70

    Angular 英雄编辑器

    应用程序现在有了基本标题。 接下来你要创建一个新组件来显示英雄信息并且把这个组件放到应用程序外壳里去。 创建英雄组件 使用 Angular CLI 创建一个名为 heroes 新组件。...CSS 元素选择器 app-heroes 用来父组件模板匹配 HTML 元素名称,以识别出该组件。...ngOnInit 是一个生命周期钩子(lifecycle hook),Angular 创建完组件后很快就会调用 ngOnInit。这里是放置初始化逻辑好地方。...你可以编辑英雄名字,并且会看到这个改动立刻体现在这个输入框上方  。 声明 HeroesComponent 每个组件都必须声明(且只能声明)一个 NgModule 。...打开 src/app/app.module.ts 你可以顶部找到 HeroesComponent 已经导入过了。

    2.5K50

    Travis CI 教程:入门

    开发人员知道,问题影响用户之前,必须彻底测试应用程序。忘记测试会导致像烦恼客户一样复杂情况, App Store 咆哮一星评论,以及因为让简单错误漏网而引起瘀伤。...travis_permissions Travis 需要访问读写 Webhooks,服务和提交状态。这样它就可以创建自动 “钩子”,它需要在你想要时候自动运行。 单击绿色 “授权应用程序按钮。...检查项目,然后停止应用程序。建立并再次运行。万岁,物品仍然检查!...确保该复选框具有正确起始值。 通过发送 TouchUpInside 当用户点击它调用事件,轻击该复选框。...一直滚动到底部,您将看到以下内容: ? travis_test_error-700x50 向上滚动一下,查看有关运行测试发生崩溃信息: ?

    5.1K21

    怎么删掉Windows计算机上Java?Java卸载流程详解!

    大家好,又见面了,是你们朋友全栈君。 大家都知道Java版本不是一成不变,Java会朝着功能增加、漏洞修复和性能优化方向一直进步。...而公布新版Java之后,我们需要使用它,那么卸载掉旧版Java很有必要,为什么呢? 这是Java官方给出回复: 我们强烈建议您卸载系统所有 Java 旧版本。...系统上保留 Java 旧版本存在严重安全风险。 从系统卸载 Java 旧版本可确保在运行 Java 应用程序时实现系统最新安全和性能提升。...Windows 10 – 卸载程序 单击开始 选择设置 选择系统 选择应用程序和功能 选择要卸载程序,然后单击其卸载按钮。...单击要卸载软件将其选中,然后单击删除按钮

    3.1K10

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

    当点击change name按钮,改变了 name 属性值,这时模板视图显示内容也发生了改变。...ngOnInit 函数里向服务器端发送了一个 Ajax 请求,当这个请求返回结果,同样会改变当前模板视图上绑定 name 属性值。...Angular并不是捕捉对象变动,它采用适当时机去检验对象值是否改动,这个时机就是这些异步事件发生。...变化监测处理机制 通过上面的介绍,我们大致明白了变化检测是如何触发,那么 Angular 变化监测是如何执行呢?...开始: 检测 title 值是否发生了变化:没有发生变化 检测 paramOneVal 值是否发生了变化:发生了变化(点击按钮调用changeVal()方法改变) 检测 paramTwoVal 值是否发生了变化

    1.8K80

    Angular实战之使用NG-ZORRO创建一个企业级后台框架(进阶篇)

    该方法接受当前和上一属性值 SimpleChanges 对象 ngOnInit() 之前以及所绑定一个或多个输入属性值发生变化时都会调用。...ngOnInit() Angular 第一次显示数据绑定和设置指令/组件输入属性之后,初始化指令/组件。 第一轮 ngOnChanges() 完成之后调用,只调用一次。...每个变更检测周期中,紧跟在 ngOnChanges() 和 ngOnInit() 后面调用。...ngAfterContentChecked() 每当 Angular 完成投影组件内容变更检测之后调用。...它允许你做以下这些事情: 创建一个新 Angular 应用程序 运行带有 LiveReload 支持开发服务器,以便在开发过程预览应用程序 添加功能到现有的 Angular 应用程序 运行应用程序单元测试

    4K20
    领券