如何在angular2中的点击事件中调用服务中的函数?
How can call a function in service on click event in angular2?
这是正在工作的 plunker:http://plnkr.co/edit/FOJHofLSgLRB4Po5Li6B?p=preview。
单击 类 时,底部的相应内容会发生变化,但这是硬编码的,因此是否有可能使内容来自这样的服务:
export class Subjectservice {
getClass(id : number) : any {
if(id==15)
return [{label: 'Science', state: false},{label: 'Computer Science', state: false},{label: 'Social science', state: false},{label: 'Environmental Studies', state: false}];
else if (id==68)
return [{label: 'English', state: false},{label: 'Hindi', state: false},{label: 'Mathematics', state: false},{label: 'Science', state: false}];
else if (id==910)
return [{label: 'English', state: false},{label: 'Hindi', state: false}{label: 'Social science', state: false},{label: 'Sanskrit', state: false}];
else
return [{label: 'English', state: false}{label: 'Pol Science', state: false},{label: 'Comp Science', state: false},{label: 'Social science', state: false}];
}
}
创建服务class:
import {Injectable} from '@angular/core';
@Injectable()
export class SubjectService{
getClass(id:any):number
{
//write your logic here....
}
}
在您的 AppComponent 中注入服务:
import{SubjectService} from './subject.service';
@Component({
selector: 'my-app',
template:'<div>.....</div>',
providers:[SubjectService]
})
export class AppComponent
{
constructor(private subjectSer:SubjectService)
{
// now subjectSer can be used as instance of your service i.e. subjectSer.getClass(1);
}
}
希望对您有所帮助。欢迎提问。
我创建了一个小型 angular 2 应用程序,它在点击时调用服务。请参阅 Github 的源代码 here。在app/services文件夹中可以看到heroService.ts和heroes.component.ts.
Repository: https://github.com/khanstudio-github/Angular2AppASPNet/tree/master/Angular2StarterApp/Angular2StarterApp
希望对您有所帮助。如果遇到问题,请随时询问。
这是正在工作的 plunker:http://plnkr.co/edit/FOJHofLSgLRB4Po5Li6B?p=preview。 单击 类 时,底部的相应内容会发生变化,但这是硬编码的,因此是否有可能使内容来自这样的服务:
export class Subjectservice {
getClass(id : number) : any {
if(id==15)
return [{label: 'Science', state: false},{label: 'Computer Science', state: false},{label: 'Social science', state: false},{label: 'Environmental Studies', state: false}];
else if (id==68)
return [{label: 'English', state: false},{label: 'Hindi', state: false},{label: 'Mathematics', state: false},{label: 'Science', state: false}];
else if (id==910)
return [{label: 'English', state: false},{label: 'Hindi', state: false}{label: 'Social science', state: false},{label: 'Sanskrit', state: false}];
else
return [{label: 'English', state: false}{label: 'Pol Science', state: false},{label: 'Comp Science', state: false},{label: 'Social science', state: false}];
}
}
创建服务class:
import {Injectable} from '@angular/core';
@Injectable()
export class SubjectService{
getClass(id:any):number
{
//write your logic here....
}
}
在您的 AppComponent 中注入服务:
import{SubjectService} from './subject.service';
@Component({
selector: 'my-app',
template:'<div>.....</div>',
providers:[SubjectService]
})
export class AppComponent
{
constructor(private subjectSer:SubjectService)
{
// now subjectSer can be used as instance of your service i.e. subjectSer.getClass(1);
}
}
希望对您有所帮助。欢迎提问。
我创建了一个小型 angular 2 应用程序,它在点击时调用服务。请参阅 Github 的源代码 here。在app/services文件夹中可以看到heroService.ts和heroes.component.ts.
Repository: https://github.com/khanstudio-github/Angular2AppASPNet/tree/master/Angular2StarterApp/Angular2StarterApp
希望对您有所帮助。如果遇到问题,请随时询问。