Angular 2/4：无法更新子组件视图

Question

我想通过调用子组件 的函数change（）来更新我在父组件视图中使用的str的值，这里是我的代码。

import { Component } from '@angular/core'; 
import { ChildComponent } from './child/child.component'; 

@Component({ 
    selector: 'app-root', 
    template: ` 
    <h1>parent</h1> 
    <button (click)="changeChild()">change child</button> 
    <app-child></app-child> 
    `, 
styleUrls: ['./app.component.css'] 
}) 
export class AppComponent { 

    constructor(private cc:ChildComponent) {} 

    changeChild(){ 
     this.cc.change(); 
    } 

} 

和子组件是：

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

@Component({ 
    selector: 'app-child', 
    template: ` 
     <p>{{str}}</p> 
    `, 
    styleUrls: ['./child.component.css'] 
}) 
export class ChildComponent implements OnInit { 

    private str; 

    constructor() { 
     this.str = 'initial' 
    } 

    change(){ 
     this.str = 'changed' 
    } 

    ngOnInit() { 
    } 

} 

但鉴于从未更新值STR为 “改变”。

请任何帮助，因为我是新的角4？

Answer 1

使用@ViewChild获得子组件

in Parent component 


     import {ChildComponent} from 'child.component.ts' 

export class ParentComponent{ 
------ 

@ViewChild(ChildComponent) 
private child:ChildComponent 

--- 

changeChild(){ 
this.child.change() 
} 
}