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

如何在Angular 1.5中多次调用onInit钩子时只调用一次特定的promise

在Angular 1.5中,我们可以通过使用$q服务来实现在多次调用onInit钩子时只调用一次特定的promise。下面是一个示例代码:

代码语言:txt
复制
angular.module('myApp', [])
  .component('myComponent', {
    controller: MyController
  });

function MyController($q) {
  var vm = this;
  var promise;

  vm.$onInit = function() {
    if (!promise) {
      promise = loadData(); // 调用加载数据的函数
    }

    promise.then(function(data) {
      // 处理数据
    });
  };

  function loadData() {
    var deferred = $q.defer();

    // 异步加载数据
    // ...

    // 数据加载完成后,解析promise
    deferred.resolve(data);

    return deferred.promise;
  }
}

在上面的代码中,我们在MyController控制器中定义了一个promise变量来保存加载数据的promise。在$onInit钩子中,我们首先检查promise是否已经存在,如果不存在,则调用loadData函数来加载数据并返回一个promise。然后,我们使用then方法来处理promise的解析结果。

这样,无论多次调用$onInit钩子,只有在第一次调用时会执行加载数据的逻辑,后续的调用会直接使用已存在的promise来处理数据。

推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云函数(SCF)。

  • 腾讯云云服务器(CVM):提供弹性、安全、稳定的云服务器实例,可满足各种计算需求。详情请参考腾讯云云服务器(CVM)
  • 腾讯云函数(SCF):无需管理服务器,按需运行代码,实现事件驱动的无服务器架构。详情请参考腾讯云函数(SCF)
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

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

ngOnInit 在Angular首次显示数据绑定属性并设置指令/组件输入属性后,初始化指令/组件。 在第一次ngOnChanges之后调用一次。...ngAfterContentInit 在Angular将外部内容投影到组件视图之后进行响应。 在第一次NgDoCheck之后调用一次。 组件独有的钩子。...尽可能保持这些钩子中逻辑! 接下来例子集中于钩子细节。 刺探OnInit和OnDestroy 使用这两个间谍进行卧底探索,以发现元素何时被初始化或销毁。 这是指令完美渗透工作。...ngOnChanges方法是您第一次访问这些属性机会。 在ngOnInit之前Angular调用ngOnChanges ...并在此之后多次调用。 它调用一次ngOnInit。...请注意,经常在没有感兴趣变化时,Angular经常调用AfterViewChecked。 编写瘦方法以避免性能问题。

6.2K10

Angular 从入坑到挖坑 - 组件食用指南

一、Overview angular 入坑记录笔记第二篇,介绍组件中相关概念,以及如何在 angular 中通过使用组件来完成系统功能实现 对应官方文档地址: 显示数据 模板语法 用户输入 组件之间交互...没有可见副作用:模板表达式只作为数据展示,不应该改变任何数据;应该构建出幂等表达式,除非依赖值发生变化,否则多次调用时,应该返回相同数据信息 4.1.2.2、模板绑定语法 通过数据绑定机制...被绑定输入属性值发生变化时触发,会调用多次;如果没有使用到父子组件传值,则不会触发 ngOnInit 初始化组件时会调用一次,一般是用来在构造函数之后执行组件复杂初始化逻辑 ngDoCheck 只要数据发生改变就会被调用...ngAfterContentInit 组件内容渲染完成后调用一次 ngAfterContentChecked 只要组件内容发生改变就会被调用 ngAfterViewInit 视图加载完成后触发一次,...一般用来对视图 dom 元素进行操作 ngAfterViewChecked 视图发生变化时调用,在组件生命周期中会调用多次 ngOnDestroy 在销毁组件时调用一次,一般用来在组件销毁前执行某些操作

15.8K30
  • Angular12个经典问题,看看你能答对几个?(文末附带Angular测试)

    例如,ngOnint界面的OnInit方法,这个方法必须在组件中实现。  一部分事件适用于组件/指令,而少数事件适用于组件。...它是如何在Angular 2中工作Angular 2不具有双向digest cycle,这是与Angular 1不同。...如何在Angular 2应用程序中使用codelyzer? 所有企业应用程序都会遵循一组编码惯例和准则,以更好方式维护代码。...如何在Angular 2中启用延迟加载? 大多数企业应用程序包含用各式各样用于特定业务案例模块。捆绑整个应用程序代码并完成加载,会在初始调用时,产生巨大性能开销。...如果服务器HTTP请求结果或其它一些异步操作不再需要,则Observable订阅者可以取消订阅,而Promise将最终调用成功或失败回调,即使你不需要通知或其提供结果。

    17.3K80

    Angular2 之 单元测试

    tick tick函数是Angular测试工具之一,是fakeAsync同伴。 它只能在fakeAsync主体中被调用。...---- 多次调用同一个异步方法 相信大家对这段单元测试代码很熟悉,这里就是模拟多次调用同一个方法时,返回不同值。 这里是同步方法模拟返回数据,那么异步方法同样可以。...it('when the baseUrl is exist and pageNo is exist', async(() => { // 模拟多次进行异步调用返回值 spyOn...Promise.resolve({content: datas2})); pageNo = 0; // 第一次调用 service.getRelatedList(userId...tick函数是Angular测试工具之一,是fakeAsync同伴。 它只能在fakeAsync主体中被调用调用tick()模拟时间推移,直到全部待处理异步任务都已完成。

    5.5K20

    angular面试题及答案_angular面试

    ngOninit:初始化指令或组件,在angular一次显示展示组件绑定属性后调用,该方法只会调用一次 ngDocheck:检测 ngAfterContentInit:当把内容投影进组件之后调用,...第一次调用ngDocheck()之后调用调用一次适用于组件 ngAfterContentChecked:每次完成被投影组件内容变更检测之后调用适用于组件 ngAfterViewInit...:在angular初始化组件及其子组件视图之后调用调用一次,适用于组件 ngAfterViewChecked:每次做完组件视图和子视图变更检测之后调用适用于组件 ngOnDestroy:...Promise处理一个事件 Observable可取消 Promise不可取消 14. AsyncPipe ?...当类被初始化之后,构造函数会被调用 ngOnInit ngOnInit 是angularOnInit钩子实现,用来初始化组件。

    11.1K120

    Angular constructor vs ngOnInit

    组件生命周期中一个钩子,Angular所有钩子和调用顺序如下: ngOnChanges —— 当数据绑定输入属性值发生变化时调用 ngOnInit —— 在第一次 ngOnChanges 后调用...ngDoCheck —— 自定义方法,用于检测和处理值改变 ngAfterContentInit —— 在组件内容初始化之后调用 ngAfterContentChecked —— 组件每次检查内容时调用...用于在 Angular 获取输入属性后初始化组件,该钩子方法会在第一次 ngOnChanges 之后被调用。...另外需要注意是 ngOnInit 钩子只会被调用一次,我们来看一下具体示例: import { Component, OnInit } from '@angular/core'; @Component...使用构造注入方式注入依赖对象 this.name = 'Semlinker'; // 执行数据初始化操作 } } ngOnInit 应用场景 在项目开发中我们要尽量保持构造函数简单明了,让它执行简单数据初始化操作

    1.4K20

    Angular快速学习笔记(4) -- Observable与RxJS

    这个对象定义了一些回调函数来处理可观察对象可能会发来三种通知 通知类型 说明 next 必要。用来处理每个送达值。在开始执行后可能执行零次或多次。 error 可选。用来处理错误通知。...中observables Angular 中大量使用了可观察对象,作为处理各种常用异步操作接口。...为什么NG使用observable而不是Promise? 可观察对象不会修改服务器响应(和在承诺上串联起来 .then() 调用一样)。...有一些关键不同点: 可观察对象是声明式,在被订阅之前,它不会开始执行,promise是在创建时就立即执行 可观察对象能提供多个值,promise只提供一个,这让可观察对象可用于随着时间推移获取多个值...可观察对象会区分串联处理和订阅语句,promise只有 .then() 语句 可观察对象 subscribe() 会负责处理错误,promise会把错误推送给它promise ---- 作者:

    5.2K20

    使用Angular8和百度地图api开发《旅游清单》

    我们将收获: Angular8基本用法,架构 使用百度地图API实现自己地图应用 解决调用百度地图API时跨域问题 对localStorage进行基础封装,进行数据持久化 material...项目的首页展示是已去过旅游地点和路线,地图路线是通过调用百度地图api实现,当然提供这样api很多,大家可以根据自己喜好去使用。其次我们可以在首页添加未来旅游规划和预算,方便后面使用。...,service为应用所需服务区,http服务,存储服务,custom.modules文件为第三方组件安置区。...添加旅游清单 表单空间我们都用h5原生控件,我们使用angular提供form模块,具体代码如下: import { Component, OnInit } from '@angular/core';...提供FormBuilder来处理表单数据,这里需要注意,我们在提交表单时候,需要先调用百度地图api去生成经纬度数据,之后一起添加到清单,这样做目的是要想画路线图,我们需要给百度地图api提供经纬度数据

    6K30

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

    另外对于单次变化检测,每个组件检查一次。 OnChanges 当组件任何输入属性发生变化时候,我们可以通过组件生命周期提供钩子 ngOnChanges来捕获变化内容。...虽然 Angular 2 优化后变化检测执行速度很快,但我们能否针对那些有变化组件才执行变化检测或灵活地控制变化检测时机呢 ? 答案是有的,接下来我们看一下具体怎么进行优化。...,除非手动调用该方法。...detach() - 从变化检测树中分离变化检测器,该组件变化检测器将不再执行变化检测,除非手动调用 reattach() 方法。...reattach() - 重新添加已分离变化检测器,使得该组件及其子组件都能执行变化检测 detectChanges() - 从该组件到各个子组件执行一次变化检测 接下来我们先来看一下 markForCheck

    2.9K90

    angular知识点梳理第三篇-组件

    因为我看了官网解释以后,我自己不太能知道怎么再使用我自己语言重新给你们描述一次,你们可以选择直接看我这个demo,简单暴力,也可以选择看一下官方解释,本身就是白话文,所以就没有翻译必要了。...-- 这里和vue区别在于,vue调用函数是需要@click,angular需要是(click) 只是语法上区别,执行过程是一致 --> ...【children.component.html】 //这里我们需要引入angular核心模块中Input模块进行接收父组件变量值 import { Component, OnInit,Input...如果是第一次接触angular这样框架,可能会有一些不太适应它写法,不过没太大问题,习惯了她写法就比较容易理解了!...写到后面 这篇篇幅已经有点长了,这里就不再进行写了,后面还有关于路由、以及请求封装、Rxjs、Promise以及axios使用,喜欢关注一下,持续更新!

    2.2K10

    基础 | Angular2生命周期钩子函数

    比如,OnInit接口钩子方法叫做ngOnInit, Angular在创建组件后立刻调用它 生命周期执行顺序 ngOnChanges 在有输入属性情况下才会调用,该方法接受当前和上一属性值SimpleChanges...ngOnInit 在组件初始化时候调用调用一次,在第一次调用ngOnChanges之后调用 ngDoCheck 在组件定义属性或方法变更时调用(用于脏值之检测,非常耗性能,因为会把所有的属性和方法都检测一遍...),会在ngOnChanges()和ngOnInit()之后 ngAfterContentInit 在组件内容初始化之后调用,在第一次ngDoCheck之后调用调用一次 ngAfterContentChecked...在ngAfterContentInit和每次ngDoCheck之后调用 ngAfterViewInit 在组件相应视图初始化之后调用,第一次ngAfterContentChecked之后调用调用一次...Angular组件就是基于class类实现,在Angular中,constructor用于注入依赖。 ngOnInit是Angular中生命周期一部分,在constructor后执行。

    77640

    Angular系列教程-第三节

    (当参数个数不确定时,可以使用三个点) 5.接口和类 interface:接口声明成员方法,不做实现 class:类声明并实现方法 6.构造方法和类方法 7.console.log使用 调试代码...通过实现一个或多个 Angular core 库里定义生命周期钩子接口,开发者可以介入该生命周期中这些关键时刻 每个接口都有唯一一个钩子方法,它们名字是由接口名再加上 ng 前缀构成。...比如,OnInit 接口钩子方法叫做 ngOnInit, Angular 在创建组件后立刻调用它 ngOnInit() 在 Angular一次显示数据绑定和设置指令/组件输入属性之后,初始化指令...在第一轮 ngOnChanges() 完成之后调用调用一次。 ngOnDestroy() 每当 Angular 每次销毁指令/组件之前调用并清扫。...在 Angular 销毁指令/组件之前调用

    1.5K20

    「React 基础」在 React 项目中使用 ES6,你需要了解这些

    相比其它 JavaScript 框架(Angular,Vue 或 Backbone),React学习曲线很平缓,在比较短时间就能入门,并且其可以使用现代 ES6 语法进行编写,并且不需要学习太多设计模式...,比如依赖注入或模板系统这些概念(例如 Angular),这样就大大降低了学习难度。...接下来我们来看看结构赋值是如何在我们React项目中运用,我们可以将组件属性分配给变量,示例代码如下: ?...模板字符串使用反号(backticks,`),而不是单引号或双引号。在 React 中我们使用这个特性也比较频繁,比如用在 render 方法渲染场景中,示例如下: ?...静态方法(Static methods) 静态方法,允许我们不用实例化类就能直接调用,我们通常用来做工具类函数,方便我们在项目中进行调用

    3.1K30

    2020vue面试题及答案_人际关系面试题及答案

    单一状态树让我们能够直接地定位任一特定状态片段,在调试过程中也能轻易地取得整个当前应用状态快照。...不用组件可以卸载,不占用资源 4.都支持指令,样式、事件等指令 不同点 1.创始和发行不同:Angular是由googl提供支持,初始发行于 2016年9月;React由Facebook...取而代之是,检查它一次,且不会在 v-if 为否时候运算 v-for。 29、什么是 MVVM ? MVVM是Model-View-ViewModel缩写。MVVM是一种设计思想。...42、⾃定义指令(v-check、v-focus)⽅法有哪些?它有哪些⼦函数?还有哪些⼦函数参数?...发现本站有涉嫌侵权/违法违规内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

    8.7K20

    浅谈 Angular 项目实战

    目前三大主流前端框架都研究过,博客中也有三者相关教程,最早接触是 React,但是并没有实际项目经验,做过一些 Demo 。...import { Component, OnInit } from '@angular/core'; import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service...关于异步开发历史在面试中有遇到过,可以说东西很多,比如回调函数、Promise、迭代器和生成器、async 和 await,除此之外,RxJS 中可观察对象(Observable)应该是下一个更强大异步编程方式...Angular 官网对可观察对象(Observable)和承诺(Promise)进行了对比。 需要特别注意就是,只有当订阅 Observable 实例时,它才会开始发布值。...订阅时要先调用该实例 subscribe() 方法,并把一个观察者对象传给它,用来接收通知。我刚开始使用时,也是因为这个原因被坑了一把。

    4.6K00

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

    通过将AppComponent锁定到HeroService特定实现中,切换实现用于不同场景(离线操作或使用不同模拟版本进行测试)将很困难。...您可能会试图在构造函数中调用getHeroes()方法,但构造函数不应包含复杂逻辑,特别是调用服务器构造函数(如数据访问方法)。 构造函数用于简单初始化,将构造函数参数连接到属性。...要用Angular调用getHeroes(),可以实现Angular ngOnInit生命周期钩子。 Angular为组件生命周期中关键时刻提供接口:创建,每次更改之后,最终销毁。...当组件实现该方法时,Angular会在适当时候调用它。 在“Lifecycle Hooks”页面中详细了解生命周期挂钩。...将OnInit添加到由AppComponent实现接口列表中,并使用里面的初始化逻辑编写一个ngOnInit()方法。 Angular会在正确时间调用它。

    2.9K10
    领券