Shulou(Shulou.com)06/03 Report--

This article will explain in detail the example analysis of component service injection of Angular4 dependency injection. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

Development environment and development language:

Angular 4 +

Angular CLI

TypeScript

Basic knowledge

How to create Angular components

In Angular we create a simple component in the following ways:

@ Component ({selector: 'app-root', template: `{{title}}`}) export class AppComponent {title: string =' App Works';}

How to create an Angular service

In Angular we create a simple service in the following ways:

Export class DataService {getData () {return ['Angular',' React', 'Vue'];}}

Injecting services into the component

After introducing the basics, let's create a new component-HeroComponent, which is used to display information about heroes. The implementation is as follows:

Import {Component, OnInit} from'@ angular/core';@Component ({selector: 'app-hero', template: `ID: {{hero.id}}-Name: {{hero.name} `}) export class HeroComponent implements OnInit {heros: Array NgOnInit () {this.heros = [{id: 11, name:'Mr. Nice'}, {id: 12, name: 'Narco'}, {id: 13, name:' Bombasto'}, {id: 14, name: 'Celeritas'}, {id: 15, name:' Magneta'}];}}

In the HeroComponent component, we initialize the data in the ngOnInit hook, and then use the ngFor instruction to display the information about the list of heroes. After creating the HeroComponent component, we will verify the functionality of the component.

First import the HeroComponent component in AppModule, as follows:

Import {HeroComponent} from'. / hero/hero.component';@NgModule ({declarations: [AppComponent, HeroComponent],...}) export class AppModule {}

Then update the AppComponent component as follows:

Import {Component} from'@ angular/core';@Component ({selector: 'app-root', template: ``}) export class AppComponent {}

If nothing happens, visit the http://localhost:4200/ page and you will see the following information:

ID: 11-Name: Mr. NiceID: 12-Name: NarcoID: 13-Name: BombastoID: 14-Name: CeleritasID: 15-Name: Magneta

Is this how it all ends, No! No! Don't forget that the topic of this lesson is to introduce how to inject services into components. In the current HeroComponent component, our hero list information is fixed, in the actual development scenario, we generally need to obtain the corresponding information from the remote server. But let's not think about it for the time being. Suppose another component needs to use the same list of heroes. What are we going to do? go straight to the "ultimate trick"-Copy & & Paste. Of course, this is the "ultimate trick", how can you use it casually (if you are not afraid of being beaten by a group, please help yourself).

The ideal way to address the problems mentioned above is to create a HeroService service for data sharing.

Let's just do it. Let's create a HeroService service right away, as follows:

Export class HeroService {heros: Array = [{id: 11, name:'Mr. Nice'}, {id: 12, name: 'Narco'}, {id: 13, name:' Bombasto'}, {id: 14, name: 'Celeritas'}, {id: 15, name:' Magneta'}]; getHeros () {return this.heros;}}

In the HeroService service, we define a heros property and a getHeros () method:

Heros-used to save list information for heroes

GetHeros ()-used to get list information for heroes

After creating the HeroService service, let's show you how to use the HeroService service in the component.

Using HeroService in a component

The use of HeroService services in a component consists of three steps:

1. Import HeroService service

Import {HeroService} from'.. / hero.service'

2. Declare the HeroService service

@ Component ({selector: 'app-hero',... Providers: [HeroService]})

Inject HeroService services

Export class HeroComponent implements OnInit {constructor (private heroService: HeroService) {}}

The complete code is as follows:

Import {Component, OnInit} from'@ angular/core';import {HeroService} from'. / hero.service';@Component ({selector: 'app-hero', template: `ID: {{hero.id}}-Name: {{hero.name}} `, providers: [HeroService]}) export class HeroComponent implements OnInit {constructor (private heroService: HeroService) {} heros: Array; ngOnInit () {this.heros = this.heroService.getHeros ();}}

Looking at the line providers: [HeroService], I'm sure some readers will be a little confused because they may be configuring the HeroService service in the following way.

@ NgModule ({declarations: [AppComponent, HeroComponent],... Providers: [HeroService], bootstrap: [AppComponent]}) export class AppModule {}

Of course, the two ways will not affect the function that we finally want to achieve, but there must be a difference between the two ways. I hope interested readers will think about it. In most scenarios, it is recommended to configure the corresponding service in the Metadata information of NgModule.

I have something to say.

Why do you have to declare a type in the constructor of a HeroComponent component class after you configure HeroService?

Import {HeroService} from'.. / hero.service';export class HeroComponent implements OnInit {constructor (private heroService: HeroService) {}}

In fact, in @ NgModule ({...}) or @ Component ({...}) Metadata, we just configure the relevant information about Provider, that is, tell the Angular DI (dependency injection) system how to create the corresponding dependent object based on the configured provider information. In the HeroComponent component class, we tell the Angular DI system the type of dependent object we need by constructing injection.

This is the end of the article on "sample Analysis of component Service injection of Angular4 dependency injection". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.