父組件給子組件傳值-@input
父組件不僅可以給子組件傳遞簡(jiǎn)單的數(shù)據(jù)名秀，還可把自己的方法以及整個(gè)父組件傳給子組件
- 1.父組件調(diào)用子組件的時(shí)候傳入數(shù)據(jù)
<app-header [msg]="msg"></app-header>
- 子組件引入 Input 模塊
import { Component, OnInit ,Input } from '@angular/core';
- 子組件中 @Input 接收父組件傳過(guò)來(lái)的數(shù)據(jù)
export class HeaderComponent implements OnInit {
@Input() msg:string
constructor() { }
ngOnInit() { }
}
- 4 子組件中使用父組件的數(shù)據(jù)
<h2>這是頭部組件--{{msg}}</h2>
<app-header [title]="title" [msg]="msg" [run]='run' [home]='this'></app-header>
import { Component, OnInit,Input} from '@angular/core';
//接受父組件傳來(lái)的數(shù)據(jù)
@Input() title:any;
@Input() msg:any;
@Input() run:any;
@Input() home:any;
getParentRun(){
//執(zhí)行父組件的run 方法
// this.run();
alert(this.home.msg);
this.home.run();
}
子組件通過(guò)@Output 觸發(fā)父組件的方法
- 子組件引入 Output 和 EventEmitter
import { Component, OnInit ,Input,Output,EventEmitter} from '@angular/core';
2.子組件中實(shí)例化 EventEmitter
@Output() private outer=new EventEmitter<string>();
/*用 EventEmitter 和 output 裝飾器配合使用 <string>指定類(lèi)型變量*/
3.子組件通過(guò) EventEmitter 對(duì)象 outer 實(shí)例廣播數(shù)據(jù)
sendParent(){
// alert('zhixing');
this.outer.emit('msg from child')
}
4.父組件調(diào)用子組件的時(shí)候，定義接收事件 , outer 就是子組件的 EventEmitter 對(duì)象 outer
<app-header (outer)="runParent($event)"></app-header>
5.父組件接收到數(shù)據(jù)會(huì)調(diào)用自己的 runParent 方法努酸，這個(gè)時(shí)候就能拿到子組件的數(shù)據(jù)
//接收子組件傳遞過(guò)來(lái)的數(shù)據(jù)
runParent(msg:string){
alert(msg);
}
父組件通過(guò)@ViewChild 主動(dòng)獲取子組 件的數(shù)據(jù)和方法
調(diào)用子組件給子組件定義一個(gè)名稱
<app-footer #footerChild></app-footer>
引入 ViewChild
import { Component, OnInit ,ViewChild} from '@angular/core';
ViewChild 和剛才的子組件關(guān)聯(lián)起來(lái)
@ViewChild('footerChild') footer;
調(diào)用子組件
run(){
this.footer.footerRun();
}
import { Component, OnInit,Output,EventEmitter } from '@angular/core';
@Output() private outer=new EventEmitter();
<button (click)="sendParent()">通過(guò)@Output給父組件廣播數(shù)據(jù)</button>
sendParent(){
this.outer.emit('我是子組件的數(shù)據(jù)');
}
<app-footer #footer (outer)="run($event)"></app-footer>
run(e){
console.log(e); //子組件給父組件廣播的數(shù)據(jù)
alert('我是父組件的run方法');
}
四、非父子組件通訊
1讼溺、公共的服務(wù)
2轧邪、Localstorage (推薦)
3、Cookie
