美文网首页
angular中的Input

angular中的Input

作者: 哆啦C梦的百宝箱 | 来源:发表于2022-10-14 11:02 被阅读0次

描述一下遇见的问题:

  1. @Input用来从父组件给子组件传值,如果传的值是基本数据类型,并且这个值将来要用到子组件<input/>等输入类型的元素上,进行双向数据绑定,在页面上更改值,刷新接口,这个时候子组件的值还是自己输入的值。
//子组件
<p>我是父组件传过来的基本数据类型:{{age}}</p>
<p>我是父组件传过来的对象中的基本类型:{{name}}</p>
<input type="text" [(ngModel)]="name">
//父组件

<app-child [age]="age" [name]="person.name"></app-child>
<button (click)="changeVal()">改变传给child的值</button>


 /** 传给子组件的是一个基本数据类型 */
  age=18;
  /** 传给子组件的是一个对象中的某一个值 */
  person ={name:21};
   changeVal(){
    this.age++;
    this.person.name = 21;
  }

首次加载,我们页面会显示:21,这个时候更改页面的值,再点击按钮,值不会重新变为21。如果想实现这个功能,需要传递一个对象,changeVal里面改变对象的值,在angular6版本中,改变对象的属性值,并不会引起子组件中值的改变,但是angular12经过测试,在父组件中修改属性的值,子组件中会随之更改。

  1. 关于Input结合set和get使用,有一些场景,比如我们需要对传入子组件的值拿到之后做一些逻辑处理,可以搭配set和get一起用,大致套路如下:
private _age = '';
@Input() set age(str){
  //一些逻辑处理吧啦吧啦...
this._age = str;
}
get age(){
  return this._age;
}

相关文章

网友评论

      本文标题:angular中的Input

      本文链接:https://www.haomeiwen.com/subject/somoartx.html