Tworzenie serwisu

ng g s nazwaSerwisu

W serwisie deklarujemy zmienne i funkcje, jakie chcemy, np:

export class ClickService {

    sumClick = 0;
    constructor() { }

    addClicks() {
        this.sumClick += 1;
        console.log(this.sumClick);
    }

}

Następnie w componencie, w którym chcemy użyć takiego serwisu w konstruktorze dodajemy parametr:

constructor(private clickSrv: ClickService)

spowoduje to dodanie linijki import na górze pliku. Oprócz tego musimy dodać w deklaracji componentu linijkę providers z nazwą serwisu w nawiasach kwadratowych

 selector: 'app-first-click',
 templateUrl: './first-click.component.html',
 styleUrls: ['./first-click.component.css'],
 providers: [ClickService]

Możemy teraz w dowolnej metodzie odwołać się do metody z serwisu, np:

add(): void {
    this.clickSrv.addClicks();
}

Wywołując serwis w ten sposób sprawiamy, że każdy component używający go, będzie miał nową jego instancję. Żeby W całej aplikacji mieć jedną instancję serwisu trzeba przerzucić linijkę z providers do app.component (głównego komponentu aplikacji). Bądź wrzucić element w tablicę providers w app.module.ts. Ten drugi wariant ma szersze zastosowanie (bo obejmuje również wszystkie moduły aplikacji a nie tylko componenty

Zatem, żeby pobrać sobie jakąś wartość najpierw tworzymy zmienną w obrębie serwisu i przypisujemy do niej jakąś wartość. Następnie piszemy funkcję, która zwraca tą zmienną.

Następnie definiujemy zmienną w obrębie componentu, gdzie chcemy zassać dane z serwisu bez przypisywania wartości. W constructorze wstrzykujemy zależność z serwisu a w ngOnInit wiążemy zmienną componentu z funkcją zwracającą zmienną z serwisu:

export class PagesListComponent implements OnInit {
    public myVar;
    constructor(private _pageList: PageService) { }

    ngOnInit() {
        this.myVar = this._pageList.getVariable();
    }

}