angular services

系统管理员 2022-06-01 05:58 169阅读 0赞

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

![SouthEast][]

[SouthEast]: /images/20220601/d1e739596e1b4fb7b74ee8991c9118c5.png

发表评论取消回复

表情：

评论列表（有 0 条评论，169人围观）

还没有评论，来说两句吧...

相关阅读

相关 angular7中封装文件上传service服务

方式一： 1. html <div nz-col nzSpan="24"> <nz-form-item> ...

水深无声/ 2024年04月18日 08:42/ 0 赞/ 79 阅读

相关 Angular中怎样创建service服务来实现组件之间调用公共方法

场景 Angular介绍、安装Angular Cli、创建Angular项目入门教程： [https://blog.csdn.net/BADAO\_LIUMANG\_Q

柔情只为你懂/ 2023年10月07日 13:52/ 0 赞/ 18 阅读

相关 Angular 面试题汇总2-Component/Service (Angular v8+)

> Angular v8+面试系列 > > [Angular 面试题汇总1-基本知识][Angular _1-] > [Angular 面试题汇总2-Compon

川长思鸟来/ 2022年12月22日 11:23/ 0 赞/ 241 阅读

相关 Angular2 Service实践

引言: 如果说组件系统(Component)是ng2应用的躯体，那把服务(Service)认为是流通于组件之间并为其带来生机的血液再合适不过了。组件间通信的其中一种优等选择就是

本是古典何须时尚/ 2022年06月16日 03:08/ 0 赞/ 190 阅读

相关 angular services

demo.component.ts import { Component, OnInit } from '@angular/core'; import {Us

系统管理员/ 2022年06月01日 05:58/ 0 赞/ 170 阅读

相关 angular-angular入门（一）

小编我最近做的项目中前端用到了angular，全因心中无货，特来补货。【Angular】 Angular 是一个开发平台。它能帮你更轻松的构建 Web 应用。Angu

ゞ浴缸里的玫瑰/ 2022年05月30日 04:48/ 0 赞/ 246 阅读

相关 Angular学习笔记9：服务（Service）（2）

可观察的对象（observable）的数据 `在现在的是情况下：HeroService.getHeroes()` 的函数签名是同步的，它所隐含的假设是 `HeroServ

阳光穿透心脏的1/2处/ 2022年05月08日 07:34/ 0 赞/ 240 阅读

相关 Angular6学习笔记8：服务(Service)（1）

服务(Service) 继学习笔记7，可以使用主从组件，现在继续学习（服务）Service；问题：为什么需要服务？ --------------------

阳光穿透心脏的1/2处/ 2022年05月08日 07:34/ 0 赞/ 559 阅读

相关 [Angular]Angular基本概念

最近一段时间在研究Angular,今天算是倒腾的差不多了,来聊聊Angular的一些东西. 先来上一张架构图: ![在这里插入图片描述][watermark_type_

不念不忘少年蓝@/ 2022年04月13日 07:49/ 0 赞/ 322 阅读

相关 Angular--Angular Route导航

前言内容路由的基础知识路由重定向子路由辅助路由路由守卫总结

客官°小女子只卖身不卖艺/ 2021年09月27日 08:02/ 0 赞/ 415 阅读