ng4.x 子组件传值 / 方法给父组件 -- @Input + @ViewChild

# 1：@Input

---

步骤：

1：父组件调用子组建时传方法

2：在子组件引入Input

3：在子组件声明，通过Input接受父组件传过来的方法

4:在子组件使用父组件传过来的数据

---

---

《parent.component.html》:

《child.component.ts》:

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

...   ...

export class HeaderComponent implement OnInit {

@Input() getDataFromChild;

public childmsg = "这是子组件的数据";

constructor() { }

ngOnInit() { }

sendParent(){  //子组件自己的方法

   this.getDataFromChild(this.childmsg);  // 子组件调用父组件的方法

}

}

《parent.component.ts》:

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

export class NewsComponent implements OnInit {

constructor(){}

...    ...

ngOnInit() {  }

getDataFromChild(childData) {

    alert("这是子组件传来的数据"+childData);

}

｝

《child.component.html》:

给父组件传值

---

# 2：过渡  -- 父组件调用子组件的方法获取子组件的值

---

步骤：

1：父组件调用子组件的时候给子组件起个名字

2：父组件直接可以拿到子组件变量名下的数据

《child.component.ts》:

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

...   ...

export class HeaderComponent implement OnInit {

public msg="这是子组件的数据";

constructor() { }

ngOnInit() { }

childFun(){

  alert("这是子组件的方法");

}

｝

《parent.component.html》:

调用子组件的方法

---

# 3：@ViewChild  -- 父组件调用自己的方法获取子组件的方法和值

---

步骤：

1：父组件调用子组件的时候给子组件起个名字

2：父组件引入ViewChild

3：ViewChild与子组件关联

4：调用子组件

《child.component.ts》:

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

...   ...

export class HeaderComponent implement OnInit {

public msg="这是子组件的数据";

constructor() { }

ngOnInit() { }

childFun(){

alert("这是子组件的方法");

}

｝

《parent.component.html》:

父组件调用自己的方法获取子组件的数据

#childCom>

《parent.component.ts》:

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

export class NewsComponent implements OnInit {

@ViewChild('childCom')  cart;     //定义子组件 （） 里面和#** 要一致

constructor(){}

...    ...

ngOnInit() {  }

getDataFromChild(childData) {

    this.cart.childFun();      //执行子组件的方法

    alert( this.cart.msg);     //获取子组件的数据

}

｝