angular4中父组件如何调用子组件的方法

转自：http://blog.csdn.net/u012396955/article/details/78852140

 

一、新建一个子组件

ng g component child

二、子组件中添加要被调用的方法

child.component.ts

export class ChildComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

  greeting(name:string){
    console.log('hello'+name);
  }
}

三、主组件添加html代码

此处用2种方法呈现效果：

app.component.html

按钮调用child2的greeting方法

四、主组件控制器加相关调用

app.component.ts

export class AppComponent implements OnInit{

  @ViewChild('child1')
  child1:ChildComponent;

  ngOnInit(): void {
    this.child1.greeting('tom');
  }
  }

五、执行效果