In-depth understanding of dependency injection in Angular4 and in-depth understanding of angular4

In-depth understanding of dependency injection in Angular4 and in-depth understanding of angular4

Using dependency injection in Angular can help us achieve loose coupling. It can be said that only dependency injection can be used in components to truly implement reusable components.
If we have a service product. service. ts, export has a ProductService class, and the class has a getProduct method.

If dependency injection is not used, assume that we need to use this service in the product component to create a new ProductService class. However, if this component is used in another place, the required service changes, we have to change the content in the component. Such a component cannot be reused.

I. Injector

In Angular, the injector has only one implementation method that is declared in the constructor.

For example

constructor(productService: ProductService){}

In general, this code means that this component creates a productService, and this productService depends on ProductService. The ProductService here is only a token. What is ProductService, it is all explained by the provider.

Ii. Providers'

Generally, the provisioner is defined at the application level and in app. module. ts for all components or services. Of course, it can also be defined in a certain component and only used by this component.

Let's take the definition at the application level as an example:

@NgModule({  provides:[ProductService]})

This code is actually short:

@NgModule({  provides:[{    provide: ProductService,    useClass:ProductService  }]})

In this Code, the provide declares the token we just mentioned in the injector. That is to say, the two tokens correspond One to One. Angular will find the same token as the injector in the provider.

The useClass in the code is to instantiate the ProductService class, and we have helped us to create a new class. In addition to useClass, useFactory is also commonly used to instantiate a class in factory mode.

At this time, we can directly use the method in the ProductService class in the component.

When the token is the same as the name of the class to be instantiated, we can use the abbreviated method above.

After talking about this, how can we reflect reusability?

If our product component uses another service in another place, we name it AnotherProductService. With dependency injection, we do not need to change the components. Instead, we need to change the providers' in app. module. ts:

@NgModule({  provide: ProductService,  useClass: AnotherProductService})

From this code, we can see that the token has not changed, but this is the instantiated class changed to AnotherProductService.

To sum up, when the component describes in the constructor that it wants to depend on a class, Angular will first find the provisioner in the component itself. If not, it will find it in the parent component of the component, if not, go to the application level (app. module. ts. After finding the component, the component is injected according to the description of the provider.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.