注:整篇文章我是根据自己的理解来写的,里面有些用词或者表达不符合官方的,还请多多包涵。
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文件中定义
(2)在util.service.ts文件中定义一个函数,并在函数中调用你之前在event-emitter.service.ts中定义的函数。newLocation: EventEmitter<any>; ==> newLocation 是你你自己取得名的
constructor() {
this.newLocation = new EventEmitter();
} ==> 你还需要在constructor(){}中将newLocation再次定义,否则会报错。特别注意!!!
public getCreateLocation(): EventEmitter<any> {
return this.newLocation;
} ==》定义一个函数,并通过该函数返回之前定义的 newLocation。
具体格式如下所示:
export class EventEmitterService {
newLocation: EventEmitter<any>;
constructor() {
this.newLocation = new EventEmitter();
}
public getCreateLocation(): EventEmitter<any> {
return this.newLocation;
}
}
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) {
}
到此为止,共享组件的创建和数据传递完成了,希望对你能有所帮助。