angular services

demo.component.ts

import { Component, OnInit } from '@angular/core';
import {UserService} from './user.service';
import {HeartService} from './heart.service';

@Component({
    selector: 'demo12',
    providers:[UserService,HeartService],
    template: `
        <h1>Service</h1>
        <p>{{isUserLogin?"已登录":"未登录"}}</p>
        <button (click)="start()">开始心跳</button>
        <button (click)="stop()">结束心跳</button>
    `
})

export class Demo12Component implements OnInit {
    isUserLogin:boolean=false;
    constructor(private myService:UserService,private myHeart:HeartService) { }

    ngOnInit() {
        this.isUserLogin=this.myService.checkUserLogin();
    }

    start(){
        this.myHeart.go();
    }
    stop(){
        this.myHeart.stop();
    }
    
}

user.service.ts

//a-s
import { Injectable } from '@angular/core';

@Injectable()
export class UserService {

    constructor() { }

    checkUserLogin(){
        return true;
    }
}

heart.service.ts

import { Injectable } from '@angular/core';

@Injectable()
export class HeartService {
    myTimer:any=null;
    constructor() { }

    go(){
        if(this.myTimer){
            return;
        }
        this.myTimer=setInterval(()=>{
            console.log("心跳");
        },500);
    }

    stop(){
        clearInterval(this.myTimer);
        this.myTimer=null;
    }
}

也可以在app.module.ts中引入service