Angular 5 - 等效功能是什么？答案

【问题标题】：Angular 5 - what is the equivalent functionality?Angular 5 - 等效功能是什么？
【发布时间】：2019-02-03 03:50:33
【问题描述】：

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

在 Angular 中这样做的等价物是什么？

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

在控制器中就像只是将范围功能链接到服务功能？

【问题讨论】：

标签： angular typescript service angular5

【解决方案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>

【讨论】：

您也可以将这种方法用于数据/可观察数据吗？
为什么不呢？你可以。不过会有细微的变化。不过，您可能想针对发布一些代码提出一个单独的问题。
我在这里发布了问题：stackoverflow.com/questions/52073989/…