WEB start
Компьютеры. Интернет. Профессиональное обучение. 055-966-10-17
Узнать подробнее
Регистрация на сайте
Angular Service
Angular service - это специализированный компонент, который предназначен для того, чтобы предоставлять другим компонентам какие-либо общие данные.
Генерируем сервис, пользуясь Angular CLI
ng g service my-serv1
Получаем его шаблон:
import { Injectable } from '@angular/core';
@Injectable()
export class MyServ1Service {
constructor() { }
}
Импортируем его в app.module.ts, чтобы он был доступен всем компонентам проекта
import { MyServ1Service } from './my-serv1.service';
Регистрируем его там же в providers, чтобы можно было его использовать во всех дочерних компонентов через Angular Dependancy Injection
providers: [
MyServ1Service
],
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { CollapseModule } from 'ngx-bootstrap/collapse';
import { PopoverModule } from 'ngx-bootstrap/popover';
import { AppComponent } from './app.component';
import { Comp1Component } from './comp1/comp1.component';
import { MyServ1Service } from './my-serv1.service';
@NgModule({
declarations: [
AppComponent,
Comp1Component
],
imports: [
PopoverModule.forRoot(),
CollapseModule.forRoot(),
BsDropdownModule.forRoot(),
BrowserModule
],
providers: [
MyServ1Service
],
bootstrap: [AppComponent]
})
export class AppModule { }
Добавляем метод getSomething():
import { Injectable } from '@angular/core';
@Injectable()
export class MyServ1Service {
constructor() { }
getSomething(){
return "222222222";
}
}
Используем в компоненте - без Dependancy injection (не рекомендуется)
import {MyServ1Service} from '../my-serv1.service' ;
import { Component} from '@angular/core';
@Component({
selector: 'comp1',
template: `
<h1>Comp1Component</h1>
{{courses}}
`
})
export class Comp1Component {
courses;
constructor (){
let servData = new MyServ1Service();
this.courses = servData.getSomething();
}
}
Используем в компоненте через Dependency injection (в этом случае constructor (service: MyServ1Service) создаёт внутри класса переменную с именем service , которая является объектом (instance) класса MyServ1Service )
import {MyServ1Service} from '../my-serv1.service' ;
import { Component} from '@angular/core';
@Component({
selector: 'comp1',
template: `
<h1>Comp1Component</h1>
{{courses}}
`
})
export class Comp1Component {
courses;
constructor (service: MyServ1Service){
this.courses = service.getSomething();
}
}
И в app.module.ts добавляем импорт
import { MyServ1Service } from './my-serv1.service';
и
providers: [
MyServ1Service
],
весь файл
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { CollapseModule } from 'ngx-bootstrap/collapse';
import { PopoverModule } from 'ngx-bootstrap/popover';
import { AppComponent } from './app.component';
import { Comp1Component } from './comp1/comp1.component';
import { MyServ1Service } from './my-serv1.service';
@NgModule({
declarations: [
AppComponent,
Comp1Component
],
imports: [
PopoverModule.forRoot(),
CollapseModule.forRoot(),
BsDropdownModule.forRoot(),
BrowserModule
],
providers: [
MyServ1Service
],
bootstrap: [AppComponent]
})
export class AppModule { }