Angular组件拿不到@Input输入属性问题探究解决方法
我需要给一个Component设置一个输入属性 @Input，好了，直接上代码，没有什么难度。
原代码是这样的：
@Component({
selector: 'my-menu',
templateUrl: './main-menu.widget.html'
})
export class MyMenuWidget {
data: any[];
...
constructor(...) {
this._changesSubscription = this._service.changes.pipe(
map((data: any[]) => {
...
return data;
})
).subscribe((data: any[]) => {
this.data = data;
});
}
...
}添加一个输入属性：
@Component({
selector: 'my-menu',
templateUrl: './main-menu.widget.html'
})
export class MyMenuWidget {
@Input() isMainMenu: boolean = false;
data: any[];
...
constructor(...) {
this._changesSubscription = this._service.changes.pipe(
map((data: any[]) => {
...
return data;
})
).subscribe((data: any[]) => {
if (this.isMainMenu) {
this.data = data.filter((d: any) => d.ID === 233);
}
else {
this.data = data;
}
});
}
...
}使用起来：
<my-menu [isMainMenu]="mainMenu"></my-menu>
然后发现MyMenuWidget里的输入属性isMainMenu始终拿不到值，难道哪里拼写有问题吗？检查了一下，发现完全没有问题，但就是拿不到值。
定睛一看，啊啊啊？？？，对一个Observable的订阅居然写在了构造函数里！！！尽管这样写在一些场景下是可以正常工作的，不影响代码功能，但是这种写法很不规范，就像上面例子中的代码一样，引起了问题。所以，平时开发过程中， 不建议去这么写，那正确的写法是什么呢？
上代码。
@Component({
selector: 'my-menu',
templateUrl: './main-menu.widget.html'
})
export class MyMenuWidget {
@Input() isMainMenu: boolean = false;
data: any[];
...
constructor(...) {
...
}
ngOnInit() {
this._changesSubscription = this._service.changes.pipe(
map((data: any[]) => {
...
return data;
})
).subscribe((data: any[]) => {
if (this.isMainMenu) {
this.data = data.filter((d: any) => d.ID === 233);
}
else {
this.data = data;
}
});
}
...
}那么问题来了，为什么同样的代码放ngOnInit里就可以正常工作呢？有人会说，我们就是应该放ngOnInit里就行了，放构造函数里就是不行。那为啥不行呢，需要去弄明白。
问题就是，Angular构造函数和ngOnInit函数的区别是什么呢？
区别一
语言上的区别：
先从语言的角度上看一下他们的区别。ngOnInit只是组件类上的一个方法，结构上和类上的其他方法没有什么不同，只是有一个特定的名字。
export class MyMenuWidget implements OnInit {
ngOnInit() {}
}实现不实现他都是可以的，我还可以这么写，完全没有问题。无需显示的标记要实现这个接口。
export class MyMenuWidget {
ngOnInit() {}
}这是ES6的写法，上面的代码用ES5怎么写呢？
构造函数和他完全不一样，他会在创建类实例的时候会被调用。
export class MyMenuWidget {
constructor(){}
ngOnInit() {}
}区别二
组件初始化过程的区别：
从组件初始化角度来看两者的区别，还是很大的。Angular的启动过程有两个主要阶段：
1. 构造组件树；
2. 执行变更检测；
当Angular构造组件树时候，需要创建组件实例，首先就会调用构造函数new 一个实例出来，也就是调用组件类的构造函数。然后调用，包括ngOnInit的所有生命周期钩子都作为变更检测阶段的一部分被调用。
当Angular开始变更检测时，组件树已经构建好，并且已经调用树中所有组件的构造函数。此外，此时每个组件的模板节点都添加到DOM中。 在这里，你可以使用初始化组件所需的所有数据——DI provider，DOM等。@Input通信机制作为变更检测阶段的一部分进行处理的，所以@Input在构造函数中不可用。
export class MyMenuWidget {
constructor(private _elementRef: ElementRef){
...
}
ngOnInit() {}
}区别三
功能上的区别：
对于Angular构造函数，主要用来初始化，和注入依赖关系。通常的做法是，尽可能少放逻辑到构造函数中，有时候，尽管你放了很多逻辑但不影响功能。
对于ngOnInit，Angular在创建组件的DOM，使用构造函数注入所有必须的依赖，完成初始化后调用ngOnInit，这是执行组件初始化逻辑的好地方。
简单的说 ，constructor构造函数本身是和Angular无关的，ngOnInit这些钩子函数是Angular里定义的。
总结
现在是不是清楚为什么@Input在构造函数里拿不到值的了吧。以后也清楚哪些逻辑放构造函数里，哪些放ngOnInit里了吧。
到此这篇关于Angular组件拿不到@Input输入属性问题探究解决方法的文章就介绍到这了,更多相关Angular @Input输入属性内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
ES6给数组添加了一些新特性，而这些新特性到目前为止完全可以运用到自己的业务层。在这一节中将总结有关于ES6给数组提供一些新特性的使用方法2016-03-03
这篇文章主要介绍了rewrap-ajax.js插件,需要的朋友可以参考下2017-10-10
这篇文章主要介绍了如何采用call方式实现js继承,需要的朋友可以参考下2014-05-05
Javascript和Java、C这些语言不同，它是一种无类型、弱检测的语言。它对变量的定义并不需要声明变量类型，我们只要通过赋值的形式，可以将各种类型的数据赋值给同一个变量2012-01-01
今天小编就为大家分享一篇使用layui的layer组件做弹出层的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
这篇文章主要介绍了JS烟花背景效果实现方法,实例分析了javascript操作dom元素实现烟花特效的技巧,需要的朋友可以参考下2015-03-03
这篇文章主要介绍了你可能从未使用过的11+个JavaScript特性(小结)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-01-01
这篇文章主要为大家详细介绍了微信小程序使用视频播放器video组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-04-04
在写程序过程中，经常会遇到去除数组中重复元素的需求。要实现这个功能其实并不难2011-01-01
这篇文章主要介绍了JS返回iframe中frameBorder属性值的方法,分析了frameBorder属性的功能及javascript获取frameBorder属性值的技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-04-04
最新评论