Робота з функціями в Angular 2 — Включення залежностей

312

Від автора: включення залежностей дає можливість додавати в Angular функції компонентів під час виконання. Давайте розглянемо приклад і етапи реалізації включень залежностей.

Крок 1 — Створіть окремий клас, який містить включається декоратор. Включається декоратор дозволяє вводити і використовувати функціонал цього класу в будь-якому модулі Angular JS.

@Injectable()
export class classname {
}

Крок 2 — Далі у модулі appComponent або модулі, в якому ви хочете використовувати службу, вам необхідно визначити його як провайдера декораторе @Component.

@Component ({
providers : [classname]
})

Давайте розглянемо, як це робиться.

Крок 1. Створіть файл ts для служби з ім’ям app.service.ts.

Робота з функціями в Angular 2 — Включення залежностей

Крок 2 — Помістіть наступний код у файл, створений вище.

import {
Injectable
} from ‘@angular/core’;
@Injectable()
export class appService {
getApp(): string {
return “Hello world”;
}
}

Примітка:

Включається декоратор імпортується з модуля angular/core.

Ми створюємо клас з ім’ям appService, який оформляється декоратором Injectable.

Ми створюємо просту функцію getApp, яка повертає просту рядок «Hello world».

Крок 3 – Додайте у файл app.component.ts наступний код.

import {
Component
} from ‘@angular/core’;
import {
appService
} from ‘./app.service’;
@Component({
selector: ‘my-app’,
template: ‘

{{value}}

‘,
providers: [appService]
})
export class AppComponent {
value: string = “”;
constructor(private _appService: appService) { }
ngOnInit(): void {
this.value = this._appService.getApp();
}
}

Примітка:

По-перше, ми імпортуємо модуль appService в модуль appComponent.

Потім ми реєструємо службу в якості провайдера в цьому модулі.

У конструкторі ми визначаємо змінну з ім’ям _appService типу appService, щоб її можна було викликати де завгодно в модулі appComponent.

Наприклад, в lifecyclehook ngOnInit ми викликали функцію getApp служби та присвоїли результат в якості значення властивості класу AppComponent.

Збережіть всі зміни коду і оновіть сторінку браузера, ви отримаєте наступний результат.

Робота з функціями в Angular 2 — Включення залежностей