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,到此結束！

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