在我的AngularJS 1.5应用程序中,我有一些控制器功能直接调用服务功能。
什么相当于在Angular中这样做?
$scope.permissions = ClockingMenuService.permissions;
$scope.data = ClockingMenuService.data;
$scope.decrementWeek = ClockingMenuService.decrementWeek;
$scope.incrementWeek = ClockingMenuService.incrementWeek;
在控制器中,只需将范围功能链接到服务功能?
我假设你想要将这些方法暴露给组件的模板,这就是你将它们绑定到$scope
的原因。
要在Angular中执行此操作,您只需将此服务作为公共服务作为依赖项注入。一旦注入公共服务,就可以直接从组件模板本身调用这些方法。
假设我想在AppComponent
的模板中访问这些方法。这是我如何做到的:
import { Component, OnInit } from '@angular/core';
import { ClockingMenuService } from 'path-to-the-service';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
constructor(public clockingMenuService: ClockingMenuService) {}
ngOnInit() {
console.log(this.clockingMenuService.permissions);
console.log(this.clockingMenuService.data);
}
}
现在,在你的app.component.html
中,你可以使用这样的服务方法:
<button (click)="clockingMenuService.decrementWeek()">Call decrementWeek</button>
<button (click)="clockingMenuService.incrementWeek()">Call incrementWeek</button>
注意:公开将服务公开发布到模板通常不被视为一种良好做法。因此,您可以在类中创建方法引用,然后在模板中使用这些引用。这是更新的组件的样子:
import { Component, OnInit } from '@angular/core';
import { ClockingMenuService } from 'path-to-the-service';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
decrementWeek;
incrementWeek;
constructor(private clockingMenuService: ClockingMenuService) {}
ngOnInit() {
console.log(this.clockingMenuService.permissions);
console.log(this.clockingMenuService.data);
decrementWeek = this.clockingMenuService.decrementWeek;
incrementWeek = this.clockingMenuService.incrementWeek;
}
}
以下是模板的外观:
<button (click)="decrementWeek()">Call decrementWeek</button>
<button (click)="incrementWeek()">Call incrementWeek</button>