使用背景:
接著上面幾篇文章的案例逗概,在進(jìn)行搜索的時候通常會有按回車鍵進(jìn)行搜索恋拍,因為搜索組件與信息展示組件不是一個組件嘀粱,當(dāng)在一個ts文件中想使用另一個ts文件中的方法,這里就需要使用到@ViewChild了豆同。
image.png
搜索框是放在app.component.html中的,信息框是放在app-position組件中的含鳞∮靶猓基本的搜索流程是:剛我改變input輸入框中的值時,使用雙向綁定進(jìn)行value的獲取蝉绷,然后添加click搜索點(diǎn)擊事件鸭廷,將輸入值傳到app-position組件中進(jìn)行search方法的邏輯計算。
因為所有的組件都是放在主組件中熔吗,所以這里就必須使用到父組件子組件之間的傳值辆床,通常是使用模板變量來調(diào)用子組件的方法跟變量。
當(dāng)在搜索組件中進(jìn)行點(diǎn)擊回車操作時桅狠,會將值傳到search方法中進(jìn)行搜索讼载,所以要是使用到@ViewChild ,從而在父組件ts文件中可以使用子組件中定義的模板變量進(jìn)而調(diào)用search方法中跌。
2.子組件的導(dǎo)入
import { PositionComponent} from './position/position.component';
@ViewChild(PositionComponent)
position_all: PositionComponent;
private search_info: string
onkeyup(ev) {
if (ev.keyCode == 13) {
this.position_all.search(this.search_info);
}
}