Angular4中关于component组件如何获取前端页面用户输入的值

         从今天开始将自己在项目或者学习过程中遇到的问题及解决办法写成博客，积累经验并记录自己的成长。

       问题：angular这个框架采用mvc思想，视图与逻辑是分离的，也就是html文件负责页面输出，ts文件负责业务逻辑处理，各司其职，那么问题来了，如何在ts文件中获取到用户在html页面中输入的值？直白点就是用户在输入框中输入“sinclar”，那在ts文件中要怎么样才能获取到，就是这个问题。下面是我的解决办法：

        解决：

        1.首先要新建一个model文件：

           export class Barcode{
                      public id: number;
                      public name: string;
                      public power: string;
            }

         这个文件的意义就是一个桥梁的作用，连接视图层与逻辑层，在angular1中承担这个角色的就是鼎鼎大名的$scope，不过从angular2开始就放弃这个属性了，这么说有点抽象，就是可以在ts文件中new一个Human对象，然后在前端页面是用ngModel将其绑定，这样就实现了双向绑定。这样说好像还很模糊，等看完整篇文章再自己对比代码就会清晰很多了，不过是自己的讲解，自己理解能力也是有限。

          2.   1）在ts文件中引入model：import { Barcode}    from '../Model/barcode';

                2）创建一个model对象：   private model = new Barcode();

                3）现在可以随便使用model对象的属性，比如model.power，而且在这里我们操作的model.power会实时更新到模版中，比如model.power = “sinclar”；这是模版使用ngModel绑定数据的输入框就会更新为sinclar，这涉及到angular框架的一个特点，叫双向数据绑定。

          3.现在就看前端模版要怎么写了，代码如下：

                             

                                      

                                              SSCC barcode
                                                                                                                                     [(ngModel)]=" Barcode.barcode" name="barcode"    #barcode="ngModel">
                 
                                       

                             

               这里使用了form表单提交，先不关注这个，有兴趣可以看着这个地址https://www.w3cschool.cn/vntgu/vntgu-u7by25w6.html 可以看到有个[(ngModel)]这就是双向数据绑定的写法，[]实现了数据流从组件到模板，()实现了数据流从模板到组件，两者一结合[()]就实现了双向绑定。 至于#barcode="ngModel"这行代码我不太清楚什么作用，删掉好像没什么影响。