分享更有价值
被信任是一种快乐

Angular组件拿不到@Input输入属性怎么解决

文章页正文上

本篇内容介绍了“Angular组件拿不到@Input输入属性怎么解决”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!原代码是这样的

@Component({
	selector:'my-menu',
	templateUrl:'./main-menu.widget.html'
})
exportclassMyMenuWidget{
data:any[];

...

constructor(...){
this._changesSubscription=this._service.changes.pipe(
map((data:any[])=>{
...
returndata;
})
).subscribe((data:any[])=>{
this.data=data;
});
}

...
}

添加免费云主机、域名一个输入属性:

@Component({
	selector:'my-menu',
	templateUrl:'./main-menu.widget.html'
})
exportclassMyMenuWidget{
@Input()isMainMenu:boolean=false;

data:any[];

...

constructor(...){
this._changesSubscription=this._service.changes.pipe(
map((data:any[])=>{
...
returndata;
})
).subscribe((data:any[])=>{
if(this.isMainMenu){
this.data=data.filter((d:any)=>d.ID===233);
}
else{
this.data=data;
}
});
}

...
}

使用起来

然后发现MyMenuWidget里的输入属性isMainMenu始终拿不到值,难道哪里拼写有问题吗?检查了一下,发现完全没有问题,但就是拿不到值。定睛一看,啊啊啊???,对一个Observable的订阅居然写在了构造函数里!!!尽管这样写在一些场景下是可以正常工作的,不影响代码功能,但是这种写法很不规范,就像上面例子中的代码一样,引起了问题。所以,平时开发过程中, 不建议去这么写,那正确的写法是什么呢?上代码。

@Component({
	selector:'my-menu',
	templateUrl:'./main-menu.widget.html'
})
exportclassMyMenuWidget{
@Input()isMainMenu:boolean=false;

data:any[];

...

constructor(...){
...
}

ngOnInit(){
this._changesSubscription=this._service.changes.pipe(
map((data:any[])=>{
...
returndata;
})
).subscribe((data:any[])=>{
if(this.isMainMenu){
this.data=data.filter((d:any)=>d.ID===233);
}
else{
this.data=data;
}
});
}

...
}

那么问题来了,为什么同样的代码放ngOnInit里就可以正常工作呢?有人会说,我们就是应该放ngOnInit里就行了,放构造函数里就是不行。那为啥不行呢,需要去弄明白。问题就是,Angular构造函数和ngOnInit函数的区别是什么呢?语言上的区别:先从语言的角度上看一下他们的区别。ngOnInit只是组件类上的一个方法,结构上和类上的其他方法没有什么不同,只是有一个特定的名字。

exportclassMyMenuWidgetimplementsOnInit{
ngOnInit(){}
}

实现不实现他都是可以的,我还可以这么写,完全没有问题。无需显示的标记要实现这个接口。

exportclassMyMenuWidget{
ngOnInit(){}
}

这是ES6的写法,上面的代码用ES5怎么写呢?构造函数和他完全不一样,他会在创建类实例的时候会被调用。

exportclassMyMenuWidget{
constructor(){}

ngOnInit(){}
}

组件初始化过程的区别:从组件初始化角度来看两者的区别,还是很大的。Angular的启动过程有两个主要阶段:
1. 构造组件树; 2. 执行变更检测;当Angular构造组件树时候,需要创建组件实例,首先就会调用构造函数new 一个实例出来,也就是调用组件类的构造函数。然后调用,包括ngOnInit的所有生命周期钩子都作为变更检测阶段的一部分被调用。当Angular开始变更检测时,组件树已经构建好,并且已经调用树中所有组件的构造函数。此外,此时每个组件的模板节点都添加到DOM中。 在这里,你可以使用初始化组件所需的所有数据——DI provider,DOM等。@Input通信机制作为变更检测阶段的一部分进行处理的,所以@Input在构造函数中不可用。

exportclassMyMenuWidget{
constructor(private_elementRef:ElementRef){
...
}

ngOnInit(){}
}

功能上的区别:对于Angular构造函数,主要用来初始化,和注入依赖关系。通常的做法是,尽可能少放逻辑到构造函数中,有时候,尽管你放了很多逻辑但不影响功能。对于ngOnInit,Angular在创建组件的DOM,使用构造函数注入所有必须的依赖,完成初始化后调用ngOnInit,这是执行组件初始化逻辑的好地方。简单的说 ,constructor构造函数本身是和Angular无关的,ngOnInit这些钩子函数是Angular里定义的。“Angular组件拿不到@Input输入属性怎么解决”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注云技术网站,小编将为大家输出更多高质量的实用文章!

相关推荐: webpack如何将es6转成es5的模块

本文小编为大家详细介绍“webpack如何将es6转成es5的模块”,内容详细,步骤清晰,细节处理妥当,希望这篇“webpack如何将es6转成es5的模块”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。 配置方法:1、用导入的方法把…

文章页内容下
赞(0) 打赏
版权声明:本站采用知识共享、学习交流,不允许用于商业用途;文章由发布者自行承担一切责任,与本站无关。
文章页正文下
文章页评论上

云服务器、web空间可免费试用

宝塔面板主机、支持php,mysql等,SSL部署;安全高速企业专供99.999%稳定,另有高防主机、不限制内容等类型,具体可咨询QQ:360163164,Tel同微信:18905205712

主机选购导航云服务器试用

登录

找回密码

注册