子組件獲取父組件數(shù)據(jù)和方法
<!-- 子組件 form -->
<app-form [shows]="shows" [run]="run" [news]="this">form 組件</app-form>
<!-- 父組件中定義 run 方法 -->
run(){
alert('父組件方法')
}
在父組件中掛載子組件,通過綁定屬性的方法綁定傳遞給子組件的數(shù)據(jù)(屬性,方法,包括父組件本身)
run是傳遞給子組件的方法,注意不要加()
import { Component, OnInit,Input } from '@angular/core';
在子組件中引入 Input 模塊
export class FormComponent implements OnInit {
@Input() shows:boolean
@Input() run:any
@Input() news:this
constructor() { }
ngOnInit(): void {
}
getrun(){
this.run()
alert(this.news.title)
}
}
在子組件類中通過 @Input 裝飾器接收父組件傳遞過來的數(shù)據(jù)(屬性,方法,包括父組件本身)
<button (click)="getrun()">執(zhí)行父組件方法</button>
子組件中定義方法執(zhí)行父組件傳遞過來的方法
父組件獲取子組件數(shù)據(jù)和方法
<app-form #formId>form 組件</app-form>
public msg = '子組件的一個msg'
在子組件掛載處定義個名稱或者id,且定義一個獲取數(shù)據(jù)和執(zhí)行方法的事件
@ViewChild('formId') form: any
通過@ViewChild接受子組件傳遞過來的數(shù)據(jù)和方法
父組件中定義個方法
<button (click)="getchildMsg()">獲取form子組件的msg</button>
<button (click)="getchildRun()">執(zhí)行form子組件的方法</button>
getchildMsg() {
alert(this.form.msg)
}
getchildRun(){
this.form.formrun()
}
執(zhí)行父組件中的事件就可以獲得子組件的數(shù)據(jù)和方法
通過Output和EventEmitter
import { Component, OnInit, Output, EventEmitter } from '@angular/core';
子組件中引入Output和EventEmitter
<button (click)="setrun()">通過@Output執(zhí)行父組件數(shù)據(jù)</button>
@Output() private out = new EventEmitter()
setrun(){
alert(this.out.emit('子組件的數(shù)據(jù)'))
}
子組件中定義方法,通過@Output()聲明一個變量
子組件中實(shí)例化 EventEmitter
子組件中setrun是要執(zhí)行的方法
<app-form (out)="run($event)">form 組件</app-form>
run(e) {
console.log(e)
alert('父組件方法')
}
父組件中定義一個方法接收,父組件中的run方法接收的就是子組件的方法執(zhí)行時傳遞給父組件的數(shù)據(jù)
