当需要角度2时,viewchild输入属性不会更新

发布时间：2020-12-17 17:46:36 所属栏目：安全来源：网络整理

导读：我一直在寻找这种行为的原因,子组件’Param’中的Input()属性的值没有在正确的时间更新,我需要使用更新的值来调用服务作为参数.通过单击“更新子值”按钮,首先显示LOG B(使用旧值),然后显示LOG A(LOG A位于属性的设置器中). 父组件 @Component({ selector: '

我一直在寻找这种行为的原因,子组件’Param’中的Input()属性的值没有在正确的时间更新,我需要使用更新的值来调用服务作为参数.通过单击“更新子值”按钮,首先显示LOG B(使用旧值),然后显示LOG A(LOG A位于属性的设置器中).

父组件

@Component({
  selector: 'parent',template: `
     <child #child [param]="parentParam"></child>
     <button (click)="updateChildValue()">Update child value</button>
`})
export class Parent {
  @ViewChild('child') child: Child;
  public parentParam: number;

  public updateChildValue() {
    this.parentParam = 9;
    this.child.showParam();
  }
}

儿童组成部分

@Component({
   selector: 'child',template: '' })

export class Child {

   private _param: number;

   public get param() : number {
       return this._param;
   }

   @Input('param')
   public set param(v : number) {
      this._param  = v;
      console.log('LOG A');
      console.log(this.param);        
   }

   public showParam() {
      console.log('LOG B');
      console.log(this.param);
      //I need to call a service using the latest value of param here...
   }
}

所需的行为是首先更新param的值,然后将该值用作服务的参数.记录A然后记录B

解决方法

使用@Input()意味着您依靠Angular2机制来传播值更改,这意味着您不应期望您的更改立即生效.实际上,你的this.parentParam = 9;将通过整个Angular2循环来更新您孩子的参数,并且将始终首先执行showParam()函数.

要完成您的任务,您有两个选择：

1)直接将参数添加到showParam,如下所示：

// child component
public showParam(newVal: number) {
  this._param = newVal;
  // do your service call here
}

// parent component
public updateChildValue()
{
  this.parentParam = 9;
  this.child.showParam(9);
}

2)在您的子组件上利用ngOnChanges.每次对@Input进行更改时,Angular2都会调用此函数.但是,如果您输入的输入超过1,则可能会出现问题.

ngOnChanges(changes) {
  console.log(this.param); // new value updated
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!