子组件属性不变

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!!

希望这有助于！