Angular 5 - 什么是等效功能？

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>