От автора: включение зависимостей дает возможность добавлять в Angular функции компонентов во время выполнения. Давайте рассмотрим пример и этапы реализации включений зависимостей.
Шаг 1 — Создайте отдельный класс, который содержит включаемый декоратор. Включаемый декоратор позволяет вводить и использовать функционал этого класса в любом модуле Angular JS.
|
1 2 3 |
@Injectable() export class classname { } |
Шаг 2 — Далее в модуле appComponent или модуле, в котором вы хотите использовать службу, вам необходимо определить его как провайдера в декораторе @Component.
|
1 2 3 |
@Component ({ providers : [classname] }) |
Давайте рассмотрим, как это делается.
Шаг 1. Создайте файл ts для службы с именем app.service.ts.
Шаг 2 — Поместите следующий код в файл, созданный выше.
|
1 2 3 4 5 6 7 8 9 10 |
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 следующий код.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
import { Component } from '@angular/core'; import { appService } from './app.service'; @Component({ selector: 'my-app', template: '<div>{{value}}</div>', 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.
Сохраните все изменения кода и обновите страницу браузера, вы получите следующий результат.
Источник: //www.tutorialspoint.com/
Редакция: Команда webformyself.
