Question

在AngularJS 1.5应用程序中，我有一些控制器函数可以直接调用服务函数。

在Angular中这样做相当于什么？

$scope.permissions = ClockingMenuService.permissions;
$scope.data = ClockingMenuService.data;
$scope.decrementWeek = ClockingMenuService.decrementWeek;
$scope.incrementWeek = ClockingMenuService.incrementWeek;

控制器中的

就像将范围函数链接到服务函数一样？

Answer 1

我假设您想将这些方法公开给组件模板，这就是将它们绑定到$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>

Angular 5-等效功能是什么？

1 个答案: