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

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

От автора: включение зависимостей дает возможность добавлять в Angular функции компонентов во время выполнения. Давайте рассмотрим пример и этапы реализации включений зависимостей.

Шаг 1 — Создайте отдельный класс, который содержит включаемый декоратор. Включаемый декоратор позволяет вводить и использовать функционал этого класса в любом модуле Angular JS.

@Injectable() 
  export class classname { 
}

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

@Component ({ 
  providers : [classname] 
})

Давайте рассмотрим, как это делается.

Шаг 1. Создайте файл ts для службы с именем app.service.ts.

Практический курс по созданию веб-приложения на Angular4

Станьте профессиональным веб-разработчиком, создавая востребованные веб-приложения на Angular4.

Узнать подробнее

Работа с функциями в 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: '<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.

Сохраните все изменения кода и обновите страницу браузера, вы получите следующий результат.

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

Источник: https://www.tutorialspoint.com/

Редакция: Команда webformyself.

Практический курс по созданию веб-приложения на Angular4

Станьте профессиональным веб-разработчиком, создавая востребованные веб-приложения на Angular4.

Узнать подробнее

Angular 4. Быстрый старт

Овладейте азами работы с Angular 4 с полного нуля

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree