首页 文章

Angular 5 - 什么是等效功能？

提问于
浏览 次
-1

在我的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 回答

  • 1

    我'm assuming that you want to expose these methods to the template of a component and that'是你将它们绑定到 $scope 的原因 .

    要在Angular中执行此操作，您只需将此服务作为公共服务作为依赖项注入 . 一旦注入公共服务，就可以直接从组件模板本身调用这些方法 .

    假设我想在我的 AppComponent 's Template. Here'中访问这些方法，我该怎么做：

    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>

    NOTE ：公开将这些服务公开给模板通常不被视为一种良好做法 . 因此，您可以在类中创建方法引用，然后在模板中使用这些引用 . 这是更新的组件的样子：

    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>
    回复于

相关问题