Angular之@ViewChild

使用背景：
接着上面几篇文章的案例，在进行搜索的时候通常会有按回车键进行搜索，因为搜索组件与信息展示组件不是一个组件，当在一个ts文件中想使用另一个ts文件中的方法，这里就需要使用到@ViewChild了。

image.png

搜索框是放在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);
}
}