Question

这可能是一个简单的错误，但我自己无法弄明白。

假设我们有一个包含子组件的父组件。这个子组件具有下一个属性：

private n : Number = 0;

和方法：

plusOne(){
    this.n += 1;
}

所以，每当我们调用“plusOne”方法时，“n”属性会将其值增加1。如果我从子组件内部调用此方法，一切正常。问题是当从父组件调用方法（使用ViewChild）时，该属性不会更改该值。实际上，使用console.log我检查了方法是否成功调用，属性在方法的生命周期中更改了值。

在以后的故障排除中，我将属性更改为

public n : Number = 0;

然后尝试从父组件

直接访问它

this.child.n = 1;

但财产仍然没有改变。

Answer 1

你可以在下面试试，

详细了解parent - child interaction using ViewChild here

import { Component, OnDestroy, OnInit } from '@angular/core';
import { AfterViewInit, ViewChild } from '@angular/core';

@Component({
  selector: 'child-component',
  template: '<p>{{num}}</p>'
})
export class ChildComponent implements OnInit, OnDestroy {
  num = 0;
}

@Component({
  selector: 'my-app',
  template: `<h1>My First Angular 2 App</h1>
  <button (click)="updateChild()" >Update child NUM</button>
  <child-component></child-component>
  `
})
export class AppComponent {
   @ViewChild(ChildComponent)
   private childComponent: ChildComponent;

  updateChild(){
    this.childComponent.num +=1;
  }
}

以下是Plunker!!

希望这会有所帮助!!

子组件属性不会更改

1 个答案: