依赖注入在 angular 应用程序中不起作用

Question

I am having trouble in accessing the properties of my service. As you can see in the pictures below, Decorators and imports are in order and the service itself was properly added and injected. I don't seem to understand what is causing the error, since the "normal procedure" of dependency injection is being respected. The service in question is the Register service. Any advices to resolve the problem? Thanks in advance.

app.module.ts

register.component.ts

register.service.ts

Part of the register.component.html

Errors I am getting(all similar):

**

Files:

Answer 1

I'm pointing 2 mistakes in the above code snippet.

1. Yes Obviously while implementing OnInit life cycle hook in the RegisterService class. Since all life cycle hooks are for components not for services.

2. Since you already added below line in the RegisterService class.

@Injectable({ providedIn: 'root' })

You don't need to add this service class again in the provider array of app.module.ts class. Since @Injectable({providedIn: 'root'}) already means you injected the service at root level.

Answer 2

services didn't support component lifecycle like OnInit etc

your service can be like this

@Injectable()
export class FormService {
  contactForm: FormGroup;

  constructor(private formBuilder: FormBuilder) {
    this.createContactForm();
  }

  createContactForm(){
    this.contactForm = this.formBuilder.group({
      fullName: [''],  
      email: [''],
      message: ['']
    });
  }
}

example

Answer 3

Only Directive and component instances have a lifecycle so register.service.ts is created like component