# 1：@Input
步骤：
1：父组件调用子组建时传方法
2：在子组件引入Input
3：在子组件声明，通过Input接受父组件传过来的方法
4:在子组件使用父组件传过来的数据
《parent.component.html》:
<app-child [run] = " run "></app-child>
《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》:
<button (click) = "sendParent()">给父组件传值</button>
# 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》:
<button (click)="childFun()">调用子组件的方法</button>
<app-child #childCom></app-child>
# 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》:
<button (click)="getDataFromChild()">父组件调用自己的方法获取子组件的数据</button>
<app-child #childCom></app-child>
《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); //获取子组件的数据
}
｝
网友评论