Question

我是Angular的新手，我有一个已经正常工作的后端（用c＃asp.net编写），我想使用angular做一个前端。我一直在关注一些不错的教程，但是其中许多教程都是使用伪造的后端。

我知道在角度上依赖注入是一种很好的做法，我的代码中已经包含了其中一些，但是现在我正在调用后端来创建用户，我想知道是否应该使用依赖注入来创建我要在POST请求中作为主体发送的对象（以及是否应该执行此操作），或者现在是否可以将其保留在代码中。

我的代码正在Angular 7中运行。

这是我的课程：

export class UserRegister {  

username: string;
password: string;  
Email: string;  
town: string;
fiability: number;
nbEventsParticipated: number;
nbEventRegistered: number;
constructor( userN: string,pass:string,email:string, location:string) {
this.username = userN;
this.password = pass;
this.Email = email;
this.town = location;
}
}  `

我通过依赖注入使用的服务来调用我的webServices：

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { EnvironmentUrlService } from './environment-url.service';

@Injectable()
export class RepositoryService {

constructor(private http: HttpClient, private envUrl:EnvironmentUrlService) { }

public getData(route: string) {
return this.http.get(this.createCompleteRoute(route,   this.envUrl.urlAddress));
 }

public create(route: string, body) {
return this.http.post(this.createCompleteRoute(route, this.envUrl.urlAddress), body, this.generateHeaders());
}

public update(route: string, body) {
return this.http.put(this.createCompleteRoute(route, this.envUrl.urlAddress), body, this.generateHeaders());
 }

public delete(route: string) {
return this.http.delete(this.createCompleteRoute(route, this.envUrl.urlAddress));
}

private createCompleteRoute(route: string, envAddress: string) {
return `${envAddress}/${route}`;
}

private generateHeaders() {
return {
  headers: new HttpHeaders({ 'Content-Type': 'application/json' })
}
}
}

这就是我如何称呼我的服务，以及在哪里问自己是否应该保持这种方式还是应该使用Dependecy Injection：

onSubmit() {
this.submitted = true;

// stop here if form is invalid
if (this.registerForm.invalid) {
  return;
}
this.loading = true;
//Should I keep it like that?
let user: UserRegister = new UserRegister(this.f.username.value,this.f.password.value,this.f.mail.value,this.f.town.value);
let body = JSON.stringify(user)   
localStorage.removeItem('currentUserJWT');
this.repo.create('api/Login/CreateProfil',body)
  .subscribe(res => {
    alert(res);
    this.router.navigate(['/login']);
  },
    error => {
      this.alertService.error(error);
      this.loading = false;
    });
 }

代码正在按预期工作，但我现在想尽可能地做到最好！

感谢您的答复/阅读/建议，祝您愉快！

Lio

Answer 1

用于将FormGroup转换为Model：

Object.assign(YourVariable, this.YoutFormName.value);

Answer 2

最佳实践是始终在Angular的上下文中使用DI。它被烤入结构中。

https://angular.io/guide/dependency-injection

Answer 3

就您的user变量而言：
您将依赖项注入主要用于服务或“实际类”。您的类UserRegister更像是数据传输对象（DTO），并且不提供其自身的逻辑。但是重要的是，如果您需要不可注入的构造函数参数，DI会变得很难看。可以通过以下方法解决，即在注入后使用“初始化”方法，但是对于您而言，我认为不使用DI是首选方法。

Angular中的注入依赖性

3 个答案: