Angular4使用模型驱动来让一个组件获取另一个组件中的变量

之前写过一篇关于组件之间通讯的博客,是使用@Output + EventEmitter的方式实现父组件从子组件从获取到变量，因为之前的在父组件的html文件中使用子组件的选择器时会出现页面的不兼容，后来偶然发现除了使用上面的这种方式还可以使用模型驱动的方式让子组件中的变量的值传到模型的具体变量中去，这样就可以间接地实现获取子组件的变量（因为它需要通过模型这个步骤而不是直接在子组件中获取变量，但是实现起来的效果是一样的，而且绕开了在父组件中去使用子组件的选择器，使得页面不会出现不兼容）。下面讲一下具体步骤以及具体的代码：

(1) 创建一个模型

  export class BarcodeModel{
   public codeResult: string
}

(2) 创建一个服务
这个服务主要是用于对模型的实例化操作，并提供对这个实例对象的操作方法比如setting()或者getting()供外部调用，而且这么写会使整个结构清晰明了，提高代码的可重复性，比如如果你把写在service中的代码写在子组件中的活，结构看起来就很混乱。

 export class BarcodeService {

    barcodeModel:BarcodeModel={
        codeResult:''
    }

    constructor() {
        if (localStorage.getItem("barcodeModel")!=null) {              this.barcodeModel=JSON.parse(localStorage.getItem("barcodeModel"));
        }
     }
    //获取当前的实例对象
    getSettings(){
        return this.barcodeModel;
    }
    //对实例对象进行存储的操作，JSON.stringify（）是将对象转换以json的字符串形式来表示，详细可以去查看JSON的文档
    changeBarcode(barcodeModel:BarcodeModel){               localStorage.setItem("barcodeModel",JSON.stringify(barcodeModel));
    }
}

(3)在子组件中将想要传递的变量赋值给模型中的变量，然后调用service中的方法进行存储

export class MediaStreamComponent  {
    barcodeModel:BarcodeModel;
   constructor(barcodeService:BarcodeService) {
     this.barcodeModel = this.barcodeService.getSettings();
  };
    this.barcodeModel.codeResult = this.lastResult;
    this.barcodeService.changeBarcode(this.barcodeModel);                               
}

(4)在父组件中直接调用模型中的变量即可

export class ShippingComponent{
    private code;
    constructor(private serviceBarcode: BarcodeService){}
   this.code = this.serviceBarcode.getSettings().codeResult;
}

---

总结

总的来说就是将模型当作搬运工，从子组件中获得变量并存储起来，然后父组件就可以很轻松的获取到模型中这个变量的值，思路很清晰，代码也不复杂，希望对你有帮助，记得上面的代码套入你的项目的时候要引入service的路径，因为每个人的路径不一样所以就没写上去了。