Angular 4/用清洁代码的最佳实践

Question

在这种情况下，Angular的最佳实践是什么？

在此示例中，我有登录表格。

用户单击"提交"按钮时，我调用onsignin方法。

 onSignin(form: NgForm) {
  const email = form.value.email;
  const password = form.value.password;
  this.loginService.login(email, password).subscribe(
    data => {
      this.responseData = data;
      var dataBodyJSON = JSON.parse(this.responseData._body)
    },
    err => {
      try {
        var errorJSON = JSON.parse(err._body);
        var errorBody = errorJSON['Message']
        console.log(errorBody)
      }
    },
    () => {
      var dataBodyJSON = JSON.parse(this.responseData._body)
      sessionStorage.setItem('token', dataBodyJSON['Token']);
      window.location.href = "dashboard";
    }
  )
};

LoginService登录方法：

 login(username: string, password: string) {
        const headerParameters = new Headers({
            'Content-Type': 'application/json'
        });
        const jsonBody = {
            "Username": username,
            "Password": password
        }
        return this.http.post('loginurl'', jsonBody,
            { headers: headerParameters })
    }

如果逻辑在服务类中，那不是更好的方法吗？我只会回到登录组件的结果， 如果我必须在另一个组件中重复使用登录方法，则不需要2次编写逻辑。

另外，在Angular中，此JavaScript重定向是非常糟糕的练习，对吗？

Answer 1

并非所有开发人员都同意最佳实践，但是大多数会鼓励封装。因此，是的，如果您想在组件之间共享代码，那么我强烈建议将其放入共享类中。在Angular 2 中，我将其设置为提供商。

使用@Injectable元数据创建您的课程：

import {Injectable} from "@angular/core";
@Injectable()
export class SomeProvider {
  // Code here
}

在您的主模块中，您使用提供商元数据进行设置：

import {SomeProvider } from "../dir/to/provider/someprovider.service";
@NgModule({
    // Other code here
    providers : [SomeProvider]
})

最后，您可以使用Angular的依赖注入语法将该提供商注入组件的构造函数：

import {SomeProvider } from "../dir/to/provider/someprovider.service";
export class TaskCU {
    constructor(private someProvider: SomeProvider ) {
    };
    someMethod():any{
      someProvider.doSomething();
    }
}

您还可以将共享代码注入角元素，例如其他提供商。