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

Wil*_*lly 7 typescript angular

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

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;
    }
}
Run Code Online (Sandbox Code Playgroud)

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

第一:注入服务

constructor(private authService: AuthenticationService) {}
Run Code Online (Sandbox Code Playgroud)

第二:打电话给它

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); }
    );
}
Run Code Online (Sandbox Code Playgroud)

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

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); }
    );
}
Run Code Online (Sandbox Code Playgroud)

而且我不需要注入它或写下额外的必要工作.

我知道服务注入是已知的良好实践,但我真的不明白为什么.感谢有人会向我解释更多.

wat*_*lea 8

依赖注入提供了更大的灵活性,并使您的应用程序部分更加独立。我个人被静态方法 \xe2\x80\x94 烧毁的一个案例我开发了一个库,并且由多个子项目组成的一些项目使用了我的库的不同次要版本。这些之间没有重大变化,依赖注入可以很好地工作,注入 Angular 拾取的第一个可注入项,但是静态方法是在特定类上定义的,因此您最终会得到来自 2 个不同版本的 2 个不同方法。

\n\n

依赖注入的一个非常有用的功能是标记 \xe2\x80\x94 您可以向不同的地方提供不同的东西以满足特定的需求,但都遵循特定的接口。例如,使用 ControlValueAccessor 的自定义控件或组合多个组件的抽象 \xe2\x80\x94 如果您想创建一个可与多个组件一起使用的指令,您可以通过在其中注入令牌并在所有合适的组件中提供该令牌来实现你的。

\n\n

总的来说,依赖注入中有很多简洁的功能,而这些功能是普通静态方法无法实现的,而且静态方法也有缺点。

\n