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

在从类中调用函数之前,如何确保构造函数/ngOnInit已经完成?

在从类中调用函数之前,可以通过以下几种方式确保构造函数/ngOnInit已经完成:

  1. 使用回调函数:可以在构造函数/ngOnInit中注册一个回调函数,在构造函数/ngOnInit完成后调用该回调函数。这样,在调用函数之前,可以先检查回调函数是否已被触发,从而确保构造函数/ngOnInit已经完成。
  2. 使用Promise对象:可以在构造函数/ngOnInit中返回一个Promise对象,在调用函数之前,可以使用async/await或then()方法等待Promise对象的解析。当Promise对象解析完成时,表示构造函数/ngOnInit已经完成,可以安全地调用函数。
  3. 使用订阅/观察者模式:可以在构造函数/ngOnInit中创建一个可观察对象,并在构造函数/ngOnInit完成后发出通知。在调用函数之前,可以订阅该可观察对象,并等待通知。当接收到通知时,表示构造函数/ngOnInit已经完成,可以调用函数。
  4. 使用条件判断:可以在调用函数之前,使用条件判断语句检查构造函数/ngOnInit中的某个标志位或变量是否已经被设置。只有当该标志位或变量已经被设置时,才调用函数。

需要注意的是,以上方法仅适用于确保构造函数/ngOnInit已经完成,但不能保证其他异步操作已经完成。如果函数依赖于其他异步操作的结果,还需要进一步处理。

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

相关·内容

创建子类对象时,父构造函数调用被子类重写的方法为什么调用的是子类的方法?

void main(String[] args) { A a = new A(); B b = new B(); } } 问题:为什么创建A对象的时候父调用子类方法...但是:创建B对象父调用的方法? 答案: 当子类被加载到内存方法区后,会继续加载父到内存。...如果,子类重写了父的方法,子类的方法引用会指向子类的方法,否则子类的方法引用会指向父的方法引用。 如果子类重载了父方法,则子类重载方法引用还指向子类方法。...如果子类方法没有重写也没有重载父方法,则方法引用会指向父方法。 当子类对象创建时,会先行调用构造方法(构造方法也是方法),虚拟机会在子类方法区寻找该方法并运行。...其结果是当编译的时候,父构造方法调用的方法的参数已经强制转换为符合父方法的参数了。 上边代码在编译前已经转换为下面这个样子的了。

6.1K10

ASP.NET AJAX(6)__Microsoft AJAX Library的面向对象类型系统命名空间——构造函数——定义方法——定义属性——注册——抽象——继承——调用

定义构造函数 定义成员(方法、属性、事件) 注册 ——构造函数 构造函数即为function定义 通常用于初始化域变量 自由成员使用下划线开头(形式上的封装) ——定义方法 使用prototype..._mymethod=function{throw Error.notImplemented();}}//包含抽象方法 ——继承 调用构造函数 有父必须调用构造函数,否则会丢失继承效果...= function(name) { MyNamespace.Intern.initializeBase(this, [name]);//调用构造函数 } MyNamespace.Intern.prototype...= function(name) { MyNamespace.Intern.initializeBase(this, [name]);//调用构造函数 } MyNamespace.Intern.prototype...= function(name) { MyNamespace.Intern.initializeBase(this, [name]);//调用构造函数 } MyNamespace.Intern.prototype

6.2K50

angular面试题及答案_angular面试

第一次调用ngDocheck()之后调用,只调用一次,只适用于组件 ngAfterContentChecked:每次完成被投影组件内容的变更检测之后调用,只适用于组件 ngAfterViewInit...Constructor 和 ngOnInit 的本质区别 Constructor 在ES6 constructor表示构造函数,使用在class。来初始化操作。...当被初始化之后,构造函数会被调用 ngOnInit ngOnInit 是angularOnInit钩子的实现,用来初始化组件。...如何优化Angular 2应用程序来获得更好的性能? 1)考虑AOT编译。 2)确保应用程序已经经过了捆绑,uglify和tree shaking。...3)确保应用程序不存在不必要的import语句。 4)确保应用已经移除了不使用的第三方库。 5)所有dependencies 和dev-dependencies都是明确分离的。

10.8K120

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

命名HeroService。..._heroService);  构造函数除了设置_heroService属性外什么也不做。 _heroService的HeroService类型将构造函数的参数标识为HeroService注入点。...您可能会试图在构造函数调用getHeroes()方法,但构造函数不应包含复杂的逻辑,特别是调用服务器的构造函数(如数据访问方法)。 构造函数用于简单的初始化,如将构造函数参数连接到属性。...将OnInit添加到由AppComponent实现的接口列表,并使用里面的初始化逻辑编写一个ngOnInit()方法。 Angular会在正确的时间调用它。...使用Future,您可以注册回调函数,在计算完成时(结果准备就绪),或需要报告计算错误时调用。 这是一个简单的解释。

2.9K10

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

生命周期序列 通过调用构造函数创建组件/指令后,Angular在特定时刻按以下顺序调用生命周期钩子方法: 钩子 作用和时机 ngOnChanges Angular(重新)设置数据绑定输入属性时响应。...构造函数本身不是一个Angular钩子。 日志确认输入属性(在这种情况下的name属性)在构造时没有分配的值。...Angular团队负责人Misko Hevery解释了为什么您应该避免使用复杂的构造函数逻辑。 不要在组件构造函数获取数据。您不应该担心当在测试下创建或决定显示之前时新组件会尝试联系远程服务器。...构造函数不应仅仅将初始局部变量设置为简单值。 ngOnInit是组件获取其初始数据的好地方。 教程和HTTP章节显示了如何。 还要记住,指令的数据绑定输入属性在构建之后才会设置。...回想一下,在调用AfterView钩子之前,Angular调用了AfterContent的两个钩子。 在完成该组件的视图之前,Angular会完成投影内容的组合。

6.1K10

Angular 服务

提供商用来创建和交付服务,在这个例子,它会对 HeroService 进行实例化,以提供该服务。 现在,你需要确保 HeroService 已经作为该服务的提供商进行过注册。...getHeroes(): void {  this.heroes = this.heroService.getHeroes();} 在 ngOnInit 调用它 你固然可以在构造函数调用 getHeroes...让构造函数保持简单,只做初始化操作,比如把构造函数的参数赋值给属性。 构造函数不应该做任何事。 它当然不应该调用某个函数来向远端服务(比如真实的数据服务)发起 HTTP 请求。...而是选择在 ngOnInit 生命周期钩子调用 getHeroes(),之后交由 Angular 处理,它会在构造出 HeroesComponent 的实例之后的某个合适的时机调用 ngOnInit。...在组件的 ngOnInit 生命周期钩子调用 HeroService 方法,而不是构造函数。 你创建了一个 MessageService,以便在之间实现松耦合通讯。

3.3K70

Angular constructor vs ngOnInit

constructor 在 ES6 中就引入了,constructor(构造函数)是的特殊方法,主要用来做初始化操作,在进行实例化操作时,会被自动调用。...constructor undefined ChildComponent ngOnInit Semlinker 我们发现在 ChildComponent 构造函数,是无法获取输入属性的值,而在 ngOnInit...因为 ChildComponent 组件的构造函数会优先执行,当 ChildComponent 组件输入属性变化时会自动触发 ngOnChanges 钩子,然后在调用 ngOnInit 钩子方法,所以在...constructor 应用场景 在 Angular 构造函数一般用于依赖注入或执行一些简单的初始化操作。...this.name = 'Semlinker'; // 执行数据初始化操作 } } ngOnInit 应用场景 在项目开发我们要尽量保持构造函数简单明了,让它只执行简单的数据初始化操作,

1.4K20

Angular 从入坑到挖坑 - HTTP 请求概览

一、Overview angular 入坑记录的笔记第四篇,介绍在 angular 如何通过 HttpClient 发起 http 请求,从而完成与后端的数据交互。...然后通过依赖注入的方式注入到应用 在通常情况下,我们需要将与后端进行交互的行为封装成服务,在这个服务完成对于获取到的数据的处理,之后再注入到需要使用该服务的组件,从而确保组件仅仅包含的是必要的业务逻辑行为...@Injectable({ providedIn: 'root' }) export class AntiMotivationalQuotesServicesService { // 通过构造函数注入的方式依赖注入到使用的...通过调用注入的服务完成接口数据的获取,因为是以一种结构化对象的形式获取到接口返回的数据,因此这里可以直接通过对象属性获取到指定的属性信息 import { Component, OnInit } from...当一个拦截器已经处理完成时,需要通过 next 对象将 HTTP 请求传递到下一个拦截器,否则,整个请求将会中断。

5.2K10

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

一、Overview angular 入坑记录的笔记第二篇,介绍组件的相关概念,以及如何在 angular 通过使用组件来完成系统功能的实现 对应官方文档地址: 显示数据 模板语法 用户输入 组件之间的交互...在组件,通过使用 @Component 装饰器 1 用来将声明为组件,并为这个组件配置一些元数据 2,以决定该组件在运行期间该如何处理、实例化和使用 装饰器存在三个基础的配置参数,用来完成组件与视图之间的关联...在组件中使用服务 在需要使用的组件引入服务,然后在组件的构造函数通过依赖注入的方式注入这个服务,就可以在组件完成对于这个服务的使用 在父组件对数据进行赋值,然后调用服务的方法改变数据信息...被绑定的输入属性值发生变化时触发,会调用多次;如果没有使用到父子组件传值,则不会触发 ngOnInit 初始化组件时会调用一次,一般是用来在构造函数之后执行组件复杂的初始化逻辑 ngDoCheck 只要数据发生改变就会被调用...在组件加载过程,会按照上面列出的钩子函数顺序,在组件的构造函数执行之后依次执行,在页面加载过程中会涉及绑定数据的操作,因此会再次出发 ngDoCheck、ngAfterContentChecked

15.8K30

Angular入门,开发环境搭建,使用Angular CLI创建你的第一个Angular项目

生命周期钩子:https://angular.cn/guide/lifecycle-hooks 当 Angular 使用构造函数新建一个组件或指令后,就会按下面的顺序在特定时刻调用这些生命周期钩子方法:...注意:constructor 构造函数(依赖注入,起到对应局部变量值初始化作用): 除了使用简单的值对局部变量进行初始化之外,什么都不应该做!!...该方法接受当前和上一属性值的 SimpleChanges 对象 在 ngOnInit() 之前以及所绑定的一个或多个输入属性的值发生变化时都会调用。...ngOnInit() 在 Angular 第一次显示数据绑定和设置指令/组件的输入属性之后,初始化指令/组件。 在第一轮 ngOnChanges() 完成之后调用,只调用一次。...在 Angular 销毁指令/组件之前调用

2.7K20

Angular核心-组件的生命周期函数钩子函数

ngAfterViewChecked() ngOnDestroy() 重点 angular手册地址: https://angular.cn/guide/lifecycle-hooks Angular的组件的生命周期钩子函数调用顺序...如果组件绑定过输入属性,那么在 ngOnInit() 之前以及所绑定的一个或多个输入属性的值发生变化时都会调用。...ngOnInit() 重点 组件初始化完毕等同于Vue.js的mounted 在第一轮 ngOnChanges() 完成之后调用,只调用一次。...而且即使没有调用过 ngOnChanges(),也仍然会调用 ngOnInit()(比如当模板没有绑定任何输入属性时)。 ngDoCheck() 组件检查到了系统对自己的影响。...ngAfterViewChecked() 组件的视图发生改变需要检查 ngOnDestroy() 重点 组件即将被从DOM树上卸载时 每当 Angular 每次销毁指令/组件之前调用并清扫。

90520

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

生命周期钩子详解:https://angular.cn/guide/lifecycle-hooks 当 Angular 使用构造函数新建一个组件或指令后,就会按下面的顺序在特定时刻调用这些生命周期钩子方法...: 注意:constructor 构造函数(依赖注入,起到对应局部变量值初始化作用): 除了使用简单的值对局部变量进行初始化之外,什么都不应该做!!!...该方法接受当前和上一属性值的 SimpleChanges 对象 在 ngOnInit() 之前以及所绑定的一个或多个输入属性的值发生变化时都会调用。...ngOnInit() 在 Angular 第一次显示数据绑定和设置指令/组件的输入属性之后,初始化指令/组件。 在第一轮 ngOnChanges() 完成之后调用,只调用一次。...在 Angular 销毁指令/组件之前调用

3.9K20

Angular 从入坑到挖坑 - 表单控件概览

一、Overview angular 入坑记录的笔记第三篇,介绍 angular 中表单控件的相关概念,了解如何在 angular 创建一个表单,以及如何针对表单控件进行数据校验。...响应式表单 建立表单 由组件隐式的创建表单控件实例 在组件中进行显示的创建控件实例 表单验证 指令 函数 在表单数据发生变更时,模板驱动表单通过修改 ngModel 绑定的数据模型来完成数据更新,...在响应式表单,数据源来源于组件,因此应该在组件中直接把验证器函数添加到对应的 FormControl 的构造函数上。...然后,一旦控件数据发生了变化,angular 就会调用这些函数 这里创建针对指定控件的 getter 方法,从而在模板通过此方法来获取到指定控件的状态信息 import { Component, OnInit...g directive direactives/hero-validate 在创建完成指令之后,我们需要将这个指令将该验证器添加到已经存在的验证器集合,同时为了使这个指令可以与 angular 表单集成在一起

18.9K20

super(props) 真的那么重要吗?

重要的是,在调用构造函数之前,你不能在构造函数中使用this。 JavaScript 是不会让你这样做的: ?...为什么 JavaScript 在你使用 this 之前要先强制执行父构造函数,有一个很好的理由能够解释。 先看下面这个的层次结构: ?...如果这种情况发生在从构造函数调用的某个方法,可能会给调试工作带来很大的麻烦。 这就是为什么我建议总是调用 super(props) ,即使在没有必要的情况之下: ?...这样就确保了能够在构造函数结束之前设置好 this.props。 ---- 最后一点是长期以来 React 用户总是感到好奇的。...你可能已经注意到,当你在中使用Context API时(无论是旧版的 contextTypes 或在 React 16.6新添加的 contextType API),context 会作为第二个参数传递给构造函数

1.3K50

Angular的12个经典问题,看看你能答对几个?(文末附带Angular测试)

当@angular/core的数据绑定属性更改时,处理就会更改,在从DOM删除其模板之前,就会销毁掉它。...构造函数会在所有生命周期事件之前执行。每个接口都有一个前缀为ng的hook方法。例如,ngOnint界面的OnInit方法,这个方法必须在组件实现。 ...这通常用在setter,当的值被更改完成时。 可以通过模块的任何一个组件,使用订阅方法来实现事件发射的订阅。...如何在Angular 2启用延迟加载? 大多数企业应用程序包含用各式各样的用于特定业务案例的模块。捆绑整个应用程序代码并完成加载,会在初始调用时,产生巨大的性能开销。...确保应用程序已经经过了捆绑,uglify和tree shaking。 确保应用程序不存在不必要的import语句。 确保应用已经移除了不使用的第三方库。

17.3K80

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

当你完成这个页面,应用程序应该看起来像这个实例(查看源代码)。 开始阶段 在继续英雄之旅之前,请确认您具有以下结构。 ? 如果该应用程序尚未运行,请启动该应用程序。...在构造函数中注入HeroService,并将其保存在一个专用的_heroService字段调用服务来获取Angular ngOnInit()生命周期钩子的英雄。...你已经完成了应用程序的路由。 您没有向模板添加英雄详情链接,因为用户单击导航链接不是为了查看特定的英雄; 而是点击一个英雄的名字,不管名字是显示在仪表板还是英雄列表。...angular_router/angular_router.dart'; import 'hero_service.dart'; 将RouteParams,HeroService和Location服务注入到构造函数...这种方法需要对组件进行以下更改: 导入angular_router。 在构造函数中注入路由器,以及HeroService。 通过调用路由器的navigate()方法来实现gotoDetail()。

17.5K30
领券