web前端开发 查询方法小总结

angular ts 查询方法小总结

在ts中获取html中值的方法

有两种方法，都是Angular中的语法，一种是把值当做参数传递，另一种是使用ngModel实现双向绑定，还有一种很少用到的，Js的原生方法：document.getElementById(‘chartContainer’);

1. 参数传递法

例子：获取input框内容

这里有个独特的地方，直接在input处使用 #定义参数的name值，注意在ts中参数的类型

在html页面中

<input type=“text” placeholder=“请输入关键词1” #keyword1/>
　　<input type=“text” placeholder=“请输入关键词2” #keyword2/>
　　<button (click)=“search(keyword1, keyword2)”>检索
　　注：如果输入值类型是密码，type值可写password

在ts文件中

search(keyword1: HTMLInputElement, keyword2: HTMLInputElement) {
　　　　console.log(keyword1.value)
　　　　console.log(keyword2.value)
　　}

2. 双向绑定法

这种方法比较通用，但是需要在ts中定义对应的变量

例子1：获取input框内容

在html页面中

<i