Angular 5 - что такое эквивалентный функционал? - PullRequest
Новая
       5

Angular 5 - что такое эквивалентный функционал?

0 голосов
/ 28 августа 2018

В моем приложении AngularJS 1.5 у меня есть некоторые функции контроллера, которые напрямую вызывают сервисные функции.

что будет эквивалентно делать это в Angular? 

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

в контроллере как просто связать функцию объема с сервисной функцией?

1 Ответ

0 голосов
/ 28 августа 2018

Я предполагаю, что вы хотите предоставить эти методы шаблону компонента, и поэтому вы связываете их с $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>
...