angular2+共享组件

注：整篇文章我是根据自己的理解来写的，里面有些用词或者表达不符合官方的，还请多多包涵。

1、创建组件

打开cmd，进入到项目中的src/app/components 文件夹下，在cmd中运行指令：ng g c creat-location-window。其中，creat-location-window是你的组件名，自己取。

     

注：共享模块（组件）必须放在components中。

2、引入组件

（1）在你需要引入共享组件的组件中的HTML文件中插入共享组件的标签，代码如下所示：

<fyy-create-location-window>fyy-create-location-window>

fyy-create-location-window  ==》这个标签是由核心组件 @Component 定义的（共享），在你成功创建一个组件的时候就会自动为你定义标签，你可以根据自己的习惯修改这个标签。红笔圈出来的就是定义标签部分。

 

3、实现组件之间的连接（在路由配置中传递数据）

（1）在event-emitter.service.ts文件中定义

    newLocation: EventEmitter<any>; ==> newLocation 是你你自己取得名的

    constructor() {

       this.newLocation = new EventEmitter();

    }   ==> 你还需要在constructor(){}中将newLocation再次定义，否则会报错。特别注意！！！

    public getCreateLocation(): EventEmitter {

      return this.newLocation;

    }   ==》定义一个函数，并通过该函数返回之前定义的 newLocation。

具体格式如下所示：

    export class EventEmitterService {

        newLocation: EventEmitter<any>; 

        constructor() {

           this.newLocation = new EventEmitter();

        }

         public getCreateLocation(): EventEmitter<any> {

          return this.newLocation;

        }

     }

（2）在util.service.ts文件中定义一个函数，并在函数中调用你之前在event-emitter.service.ts中定义的函数。

    public showNewLocation(msg) {

      this.ees.getCreateLocation().emit(msg);

    }

在这里我解释下 ees：

    ees就是文件event-emitter.service.ts；

    在util.service.ts中你需要对这个文件进行引入操作，引入操作如下所示：

 

    然后进行依赖注入操作：

最后就是你看到的ees了，当然你可以根据自己的喜好来定义名字。

（3）在你需要调用共享模块的组件中的ts文件下，调用util.service.ts中的函数showNewLocation()，就是我们之前在util.service.ts中定义的函数。

 

newUser(){} ==》是我的事件函数；

us ==》 是util.service.ts，它的用法跟我在（2）中介绍ees一样，在此我就不再赘述了；

type==》 是共享组件的名字；

option ==》 定义是打开还是关闭共享组件；open是打开该共享组件，close是关闭该共享组件；

selectorRound ==》 是你在你当前组件中第几次调用该共享组件；

oldData ==》 你在打开该共享组件需要传送到共享组件的数据（oldData只是我自己定义的名字，你根据自己的需要来定义）

 

到此为止，我们已经能够成功的使用共享组件了，并将数据传送到共享组件中。接下来我将说说将共享组件的数据传到当前组件。

 

（4）将共享组件的数据传到父组件（就是调用该共享模块的组件）

在共享组件中的ts文件下进行如下操作：

    要想成功的将数据传送到父组件，必须使用@Output()， 我使用了两次，onConfirm对应的是“确定”的时候调用的函数；onCancel对应的是“取消”的时候调用的函数。

onConfirm:（在“确定” 后调用）

const msgReturn = {

  newLocations: toSave

};

this.onConfirm.emit(msgReturn);

msgReturn ==》是我返回的信息，就是需要传回到父组件的数据

onCancel的原理同onConfirm一样，在此不再赘述。

（5）父组件接收来自共享组件的数据

<fyy-create-location-window (onConfirm)="onNewLocationInfo($event)" (onCancle)="onCancelNewLocation($event)">fyy-create-location-window>

 

(onConfirm)="onNewLocationInfo($event)" ==》接收“确定”的数据

(onCancle)="onCancelNewLocation($event)"==》接收“取消”的数据

onNewLocationInfo()和onCancelNewLocation()是自己定义的函数名

接下来，就是在父组件的ts 文件下运行这两个函数，进行你需要的操作就是了。

onNewLocationInfo(msg) {

 }

onCancleLocation(msg) {

 }

到此为止，共享组件的创建和数据传递完成了，希望对你能有所帮助。