使用背景:
接着上面几篇文章的案例,在进行搜索的时候通常会有按回车键进行搜索,因为搜索组件与信息展示组件不是一个组件,当在一个ts文件中想使用另一个ts文件中的方法,这里就需要使用到@ViewChild了。
搜索框是放在app.component.html中的,信息框是放在app-position组件中的。基本的搜索流程是:刚我改变input输入框中的值时,使用双向绑定进行value的获取,然后添加click搜索点击事件,将输入值传到app-position组件中进行search方法的逻辑计算。
因为所有的组件都是放在主组件中,所以这里就必须使用到父组件子组件之间的传值,通常是使用模板变量来调用子组件的方法跟变量。
当在搜索组件中进行点击回车操作时,会将值传到search方法中进行搜索,所以要是使用到@ViewChild ,从而在父组件ts文件中可以使用子组件中定义的模板变量进而调用search方法。
2.子组件的导入
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);
}
}
网友评论