angular services

最新推荐文章于 2023-03-09 10:58:18 发布

转载最新推荐文章于 2023-03-09 10:58:18 发布 · 359 阅读

文章标签：

#angular services

angular 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了一个使用Angular框架创建的应用案例，其中包括用户服务用于检查登录状态及心跳服务实现定时任务的功能。通过组件与服务间的交互展示了如何在Angular项目中有效利用服务。

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