通常情况下,Angular中组件之间是无法相互调用方法的,比如root组件调用search组件和toDoList组件,在toDoList组件里定义一个
方法:
fun() {
alert("调用toDoList组件里的方法");
}
然后在三个组件的html里分别定义按钮事件绑定该方法,会发现只有toDoList组件可
以调用 那么如果要定义公共的方法怎么办呢?那就可以定义服务了。
1:创建服务
同创建组件一样需要创建自己的服务,命令:
ng g service myServices/ser
执行后同样和创建组件一样,会自动在app文件夹下创建myServices文件夹,然后在其下面创建ser服务
2:引入并配置服务
在app.module.ts里引入并且配置服务
引入:
import { SerService } from './myServices/ser.service';
配置:
//providers: [], //未配置时app.module.ts里是这样的
providers: [SerService],
3:定义服务方法
接下来就可以定义服务的方法了,比如定义一个alert方法:
mySerFun() {
alert("这是我的服务里面的方法");
}
4:调用服务的方法
在哪调用就要在哪引入服务
1)比如在root组件引入:
import { SerService } from './myServices/ser.service';
然后在root组件里就可以调用了mySerFun方法了(定义一个按钮click绑定rootFun方法,在rootFun里调用服务的方法,需要手动触发):
<input type="button" value="root-service" (click)="rootFun()" />
//这种写法不推荐,但是根组件里只能这么写
rootFun() {
let s = new SerService();
s.mySerFun();
}
2)在其他组件引入(比如ToDoList)
import { SerService } from 'src/app/myServices/ser.service';
然后在constructor里定义s
constructor(public s:SerService) {
}
然后绑定按钮事件
<input type="button" value="toDoList-service" (click)="toDoListfun()" />
在toDoListfun方法里就可以调用服务里的方法了
toDoListfun(){
this.s.mySerFun();
}