介绍
ngOnInit和构造函数怎么在角中使用?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。
<强> 1。构造函数
<代码>构造函数> 来表示构造函数的,构造函数使用在<代码> 中,用来做初始化操作。当包含<代码> 构造函数的类被实例化时,构造函数将被调用。
来看例子:
class AppComponent {
名称:public 才能;字符串;
构造函数才能(名字),{
,,,console.log (& # 39; Constructor 初始化# 39;);
,,,this.name =,名称;
,,}
}
let appCmp =, new AppComponent (& # 39; AppCmp& # 39;);,,//,这时候构造函数将被调用。
console.log (appCmp.name); 转成ES5代码如下:
var AppComponent =, (function (), {
function 才能;AppComponent(名字),{
,,,console.log (& # 39; Constructor 初始化# 39;);
,,,this.name =,名称;
,,}
return 才能;AppComponent;,,//,这里直接返回一个实例
}());
var appCmp =, new AppComponent (& # 39; AppCmp& # 39;);
console.log (appCmp.name); <强> 2。ngOnInit
<代码> ngOnInit 是<代码>角> OnInit 钩子的实现。用来初始化组件。
角中生命周期钩子的调用顺序如下:
<李> ngOnChanges——当被绑定的输入属性的值发生变化时调用,首次调用一定会发生在ngOnInit()之前。
<李> ngOnInit()——在角第一次显示数据绑定和设置指令/组件的输入属性之后,初始化指令/组件。在第一轮ngOnChanges()完成之后调用,只调用一次。
<李> ngDoCheck——自定义的方法,用于检测和处理值的改变。
<李> ngAfterContentInit——在组件内容初始化之后调用,只适用于组件
<李> ngAfterContentChecked——组件每次检查内容时调用,只适用于组件
<李> ngAfterViewInit——组件相应的视图初始化之后调用,只适用于组件
<李> ngAfterViewChecked——组件每次检查视图时调用,只适用于组件
<李> ngOnDestroy——当角每次销毁指令/组件之前调用并清扫。在这儿反订阅可观察对象和分离事件处理器,以防内存泄漏。
在角销毁指令/组件之前调用。
了解了这些之后我们来看一个例子:
import {组件的不同之处是,OnInit },得到& # 39;@angular/核心# 39;;
@ component ({
,选择器:& # 39;my-app& # 39;
模板:大敌;”
& lt;才能h2> Welcome 用Angular World
,’,
})
export class AppComponent implements OnInit {
,构造函数(){
console.log才能(& # 39;Constructor 初始化# 39;);
,}
,ngOnInit (), {
console.log才能(& # 39;ngOnInit hook has been 叫# 39;);
,}
} 这里输出的是:
构造函数初始化ngOnInit钩被称为
可以看的出,<代码> 的构造函数执行是在先的。
那么既然<代码> ngOnchanges> ngOnInit> ngOnchanges> 构造函数是在组件就实例化的时候就已经调用了,这也就是说,在构造函数<代码> 中我们是取不到输入属性的值的。
所以还是看例子:
//, parent.component.ts
{},Component import 得到& # 39;@angular/核心# 39;;
@ component ({
,选择器:& # 39;exe-parent& # 39;
模板:大敌;”
& lt;才能h2> Welcome 用Angular World
& lt;才能p> Hello {{名称}}& lt;/p>
& lt;才能exe-child [pname]=皀ame"祝辞& lt;/exe-child>,, & lt; !——,绑定到子组件的属性,——比;
,’,
})
export class ParentComponent {
,名字:字符串;
,构造函数(){
时间=this.name 才能;& # 39;God 眼睛# 39;;
,}
} //, child.component.ts
import {,组件,输入,,OnInit },得到& # 39;@angular/核心# 39;;
@ component ({
,,选择器:& # 39;exe-child& # 39;
模板:,才能
,,& lt; p>父组件的名称:{{pname}}, & lt;/p>
的才能
})
export class ChildComponent implements OnInit {
@Input才能()
,,pname:字符串,,//,父组件的输入属性
构造函数(),{才能
,,,console.log (& # 39; ChildComponent 构造函数# 39;,,this.pname);,//, this.name=定义
,,}
ngOnInit才能(),{
,,,console.log (& # 39; ChildComponent ngOnInit& # 39;,, this.pname);,//, this.name=God 眼睛
,,}
}
