Angular:服务注入与打字稿静态方法

时间:2017-09-10 15:34:02

标签: angular typescript

这可能是一个初学者的问题,问题与理解为什么我们需要将服务注入组件有关。

1]为什么我们需要在创建静态方法时将服务注入每个组件,并且它将返回相同的输出,我们真的不需要继续编写额外的代码注入这些服务?

我们说我有一个类似下面的身份验证服务,具有正常约定:

import { Injectable } from '@angular/core';
import { Http, Response, Headers } from '@angular/http';
import { Observable } from 'rxjs/Rx';
import 'rxjs/add/operator/map';

import { GlobalConfig } from "../global-config";

// Models
import { UserModel } from "../models/user-model";

@Injectable()
export class AuthenticationService {
    constructor(private http: Http) { }
    authenticate(user: UserModel): Observable<UserModel> {
        let userObject = this.http.post(GlobalConfig.getUrlFor('authentication'), user)
            .map((response: Response) => {
                let responseJSON = response.json();
                let userObj = <UserModel>{
                    UserId: responseJSON.UserId,
                    FirstName: responseJSON.FirstName,
                    LastName: responseJSON.LastName,
                    FullName: responseJSON.FullName,
                    Email: responseJSON.Email,
                    UserName: responseJSON.UserName,
                    Password: responseJSON.Password
                };
                return userObj;
            });
        return userObject;
    }
}

在视图模型中,我会像那样使用它:

首先:注入服务

constructor(private authService: AuthenticationService) {}

第二:称之为

login() {
    this.authService.authenticate(this.user)
    .subscribe(
        p => {
            GlobalConfig.baseUser = p;
            localStorage.setItem('user', JSON.stringify(p));
            this.router.navigate(['/dashboard']);
        },
        e => {console.log('Error has Occured:', e); }
    );
}

但是,如果我首先在身份验证服务中创建了身份验证方法,那么我将做的就是以下内容:

login() {
    AuthenticationService.authenticate(this.user)
    .subscribe(
        p => {
            GlobalConfig.baseUser = p;
            localStorage.setItem('user', JSON.stringify(p));
            this.router.navigate(['/dashboard']);
        },
        e => {console.log('Error has Occured:', e); }
    );
}

我不需要注入或写下额外的必要工作。

我知道服务注入是众所周知的良好做法,但我真的不明白为什么。感谢有人会向我解释更多。

1 个答案:

答案 0 :(得分:1)

依赖注入提供了更大的灵活性,并使您的应用程序部分更加独立。我个人被静态方法烧死的一种情况-我开发了一个库,并且由多个子项目组成的一些项目使用了我的lib的不同次要版本。两者之间没有重大变化,依赖注入将很好地工作,注入Angular拾取的第一个可注入对象,但是静态方法是在特定类上定义的,因此最终会有2种不同版本的2种不同方法。

依赖注入的一个非常有用的功能是令牌-您可以将不同的东西提供给不同的地方,以满足特定的需求,但都遵循特定的界面。例如,带有ControlValueAccessor的自定义控件或组合了多个组件的抽象—如果要创建可与多个组件一起使用的指令,可以通过在其中注入令牌并在所有合适的组件内部提供该令牌来实现。 >

总的来说,依赖注入中有很多整洁的功能,而普通的静态方法根本不可能,而且静态方法也有缺点。