Angular学习04

点击按钮,进行提交,如何获取表单中的数据?

        方法①   dom 操作 -----不推荐

                let usernameDom:any = document.getElementById('username');

        方法②  利用双向数据绑定来获取表达数据

                首先需要在根组件中引入FormsModule

                然后说明一下FormModule

                再然后就可以使用了

        

 补充:有需要的话,可以参考笔记pdf,然后进行复习总结

类似京东APP搜索功能的实现

实现思路:

        在搜索框中输入文字后,点击搜索按钮,然后触发相应的事件,进而获取数据,进而显示下下方,呈现给用户查看

显示实现步骤:

        ① 定义数据keyword,然后将其双向绑定到input输入框中,给搜索按钮添加点击事件A

        ② 定义数据历史列表historyList,当事件A触发时,首先判断该历史列表中是否存在该值,如果存在,则不添加进去,如果不存在,则添加进该历史列表中

        ③ 在添加完之后,还要将keyword置为空

        ④ 在html文件中,利用ul+*ngFor来循环遍历该历史列表,进行展示

   删除实现步骤:(扩展部分)

        上述展示的数据后面再添加一个用来删除的按钮,然后触发删除事件B,但是,这里要注意,你要删除的是哪个数据

        所以,传入的参数就是ul遍历时候li的下标

        然后相应的事件中,利用数组的splice方法将该项被删除的数据移除掉

        相应的,应该将该项被删除的数据添加到另外一个数据中,然后在下方一栏中显示出来所有被删除掉的数据

补充:

        上述还存在一个缺点,也即是点击刷新之后,界面上的数据都没了,所以需要做数据持久化处理

todoList实现思路

①界面上有输入框,并且双向绑定数据(表单数据),这个数据默认情况下为空,然后并添加上键盘事件A(该事件有参数)

②事件A接收参数,然后判断参数是否为回车键的keyCode,如果相等,则将该keyword添加到事先定义的一个list中(注意此处没有进行判断,如果存在,则不添加)

注意这里push数据的时候,不是直接pushkeyword,而是push一个对象,这样可以标记该数据的状态,比如0表示代办事项,然后1表示已完成事项

③这样在页面上展示的时候,进行循环遍历的时候,就可以遍历出来

④点击删除的话,就把该项移除,也就是其部位true,可以利用之前使用的status,然后给checkbox添加双向数据绑定,这样,当选中该项的时候,也即是为true

补充:

在某一项由待办转为已完成时

利用*ngIf,判断status是否为1或者0,会报错,可以使用[hidden]这个属性、

补充:

如果判断数组对象里面已经存在某项

思路:

        ① 封装一个方法进行判断是否存在相同的keyword

        ②注意遍历的时候如果使用forEach遍历,则存在异步的情况,这样就会导致异常存在

                遍历时,如果存在返回true,否则返回false

        解决方法,使用for循环来遍历

Angular服务

问题描述:

                比如根组件中存在搜索组件A   和    todoList组件B

                组件A和B之间的方法是不能相互调用的

                如果A和B之间存在公共的方法,则把该方法放到一个叫做服务(service)的地方------比如提供数据持久化的服务,或者数据缓存的服务

创建服务命令:

setp1:

        

step2:

        在根模块中引入并且配置服务

       import  {StorageService} from './services/storage.service';

        然后在@ngModule中配置

        providers:[StorageService]

        StorageService被export出来,相当于一个类,所以在调用使用该服务的时候

step3:

        比如在搜索组件中,需要先import引入该StorageService服务

        然后初始化

                var storage = new StorageService();

        上述写法不推荐,推荐写法:

        

如何实现数据持久化

承接上个笔记京东搜索的那个

        在页面刷新的时候,会触发ngOnit这个生命周期函数,然后获取本地存储的list,查看是否为空,不为空,则将里面的数据赋给历史列表,然后这样即便页面刷新了,也能够进行显示

        

        此外在添加和删除词条的时候,都要进行本地存储一下,更新获得实时的数据

在todoList那个联系中

        除了添加和删除词条的时候,需要进行本地存储,还要在每个词条选中的时候,因为包含有有双向数据绑定,所以给该input(checkbox)添加一个改变事件,当状态改变的时候,也进行实时保存

  补充知识点:

组件与组件之间的方法不能直接调用

组件可以调用服务的方法

服务不可以调用组件的方法

服务与服务之间可以互相调用


本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部