Angular 学习笔记服务篇

注册

service称之为注册,注册有两种方式,一种是模块级注册,一个是组件级注册.无论哪种方式,当组件需要使用服务时,都需要将服务引入组件内并在构造函数中声明

• 组件级注册,在 @Component当中的 providers数组当中引入服务
• 模块级注册,在 @ngModule当中的 providers数组当中引入服务

组件级注册

import { XxxService } from './xxx.service';
    @Component({
        providers: [XxxService]
    })

模块级注册

import { XxxService } from './xxx.service';
    @NgModule({
        providers:[
            XxxService
        ]
    })

登陆功能的实现

service

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

    @Injectable()
    export class LoginService {
        login(userName: string, password: string): boolean {
            if (userName === 'admin' && password === '123456') {
                return true;
            }
            return false;
        }
    }

html

 	<input nz-input #userName name="userName" placeholder="用户名,默认admin">
    <input nz-input #password name="password" placeholder="密码,默认123456">
    <button (click)="login(userName.value,password.value)" nz-button nzType="primary">登录</button>

ts

    import { Component } from '@angular/core';
    import { LoginService } from './service/demo.service';
    import { NzMessageService } from 'ng-zorro-antd';

    @Component({
        templateUrl: './service.component.html',
        styleUrls: ['./service.component.less'],
        providers: [LoginService]
    })
    export class ServiceComponent {
        constructor(
            private loginService: LoginService
        ) { }
        login(userName, password) {
            if (this.loginService.login(userName, password)) {
                this.nzMessageService.info('登录成功!');
            } else {
                this.nzMessageService.error('登录失败!');
            }
        }
    }