angular - 如何在组件中使用服务？

Question

当我注入 UserService 然后组件时，它不会出现当我从组件中删除服务时，组件工作正常

@NgModule 中的提供者

providers: [
    UserService,
    {
      provide:AuthServiceConfig,
      useFactory: getAuthServiceConfigs
    }
  ],

服务代码

@Injectable()
export class UserService {
    API_URL = environment.apiUrl;

    constructor(private http: HttpClient) { }

    getAll() {
        return this.http.get<User[]>(this.API_URL+"getAllUsers");
    }
}

组件代码

export class UserRegistrationComponent implements OnInit {

  registerForm: FormGroup;
  submitted = false;
  newUser;
  userService: UserService;
   constructor(
        userService: UserService        
        ) 
       {
        config.backdrop = 'static';
        config.keyboard = false;
        this.userService=userService;
       }

  ngOnInit() {
      this.registerForm = this.formBuilder.group({
          emailId: ['', Validators.required],
          firstName: ['', Validators.required],
          lastName: ['', Validators.required],
          password: ['', [Validators.required, Validators.minLength(8)]]
      });
  }
}

Answer 1

export class UserRegistrationComponent implements OnInit {

  registerForm: FormGroup;
  submitted = false;
  newUser;
  // userService: UserService; remove this line
   constructor(
        userService: UserService        
        ) 
       {
        config.backdrop = 'static';
        config.keyboard = false;
       // this.userService=userService; remove this line
       }

  ngOnInit() {
      this.registerForm = this.formBuilder.group({
          emailId: ['', Validators.required],
          firstName: ['', Validators.required],
          lastName: ['', Validators.required],
          password: ['', [Validators.required, Validators.minLength(8)]]
      });
  }
}

如果您删除注释行然后尝试，它应该可以工作。当您在构造函数中有参数时，它会自动为该类创建一个变量，因此您可以像 this.userService.getAll() 一样使用它

Answer 2

您可以在构造函数中获得服务的实例，如下所示：

constructor(private userService: UserService){}

然后你可以像这样使用它：

this.userService.getAll()