angular父子组件之间传值

组件传值。。。。。。。
1.父->子
1.子组件导入 Input
import { Component ,Input,} from '@angular/core';
2.在子组件上定义个变量名 ,使用@Input() 变量名  来接受父组件传过来的值

<TabList #table  [list]="lists" ></TabList>//list 是自定义的变量名
@Input() list;

然后就可以愉快的使用啦~

2.子->父
1.子组件导入Output,EvnentEmitter

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

2.在子组件上自定义方法名，使用@Output 自定义方法名，实例化EvnentEmitter

<TabList #table  [lists]="lists" (abc)="checkChange($event)" ></TabList>
@Output() abc = new EventEmitter(); //abc 是自定义的方法名 

3.在某个事件里触发的时候 发射到父组件

changeState():boolean{//改变当前，控制全选
		var n = this.lists.every(function(item){
				return item.state;
		})
		console.log("1111111111"+n)
		this.abc.emit(n);   //父组件能够监听自定义事件abc
		
	}

4.父组件接收

子组件每次触发 changeState 事件都会把 n 的值发射到父组件，此时父组件就可以在自定义事件checkChange里面接收子组件发送过来的信息

<TabList #table  [lists]="lists" (abc)="checkChange($event)" ></TabList>
//子传参到父触发的方法
	checkChange(n:boolean){
		//console.log(n)//undifind
			this.checkAll = n;
	}

此时我们已经完成了 子到父的传值了

3.此外，我们还可以使用@ViewChild  让父组件获取子组件的属性或者方法
1.首先在父组件中引入ViewChild

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

2.在子组件上用 #name  做好标记位，也就是定义个名字

<TabList #table  [lists]="lists" (abc)="checkChange($event)" ></TabList>

#table 就是我们给子组件起的名字

3.就可以在父组件里引入你的名字table

 @ViewChild('table') table1;//table1  是别名

4.就可以在this.table1.方法名() 父组件的某个方法里调用子组件的 属性和方法了

add():void{
		if(this.input == '')return;
		this.lists.unshift({name:this.input,state:false});
		this.input = '';
		this.checkAll=false;
		console.log(this.table1.getnum())//调用子组件的方法
                console.log(this.table1.num)//调用子组件的属性值

	}

ok,到此结束！

我是文文，一个假的程序媛。。。。。。。。。