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

This article introduces how to understand component communication and dependency injection in Angular. The content is very detailed. Interested friends can use it for reference. I hope it will be helpful to you.

How to communicate between Angular components? What is dependency injection?

1. Component communication

1.1 pass data inside the component

/ / favorite.component.tsimport {Input} from'@ angular/core';export class FavoriteComponent {@ Input () isFavorite: boolean = false;}

Note: add [] to the attribute to indicate the binding dynamic value, Boolean type after receiving within the component, normal binding value without [], and string type after receiving within the component. [recommended for related tutorials: "angular tutorial"]

1.2 components pass data to the outside world

Requirements: pass data to the parent component by clicking a button in the child component

Click// subcomponent class import {EventEmitter, Output} from "@ angular/core" export class FavoriteComponent {@ Output () change = new EventEmitter () onClick () {this.change.emit ({name: "Zhang San"})}} / / parent component class export class AppComponent {onChange (event: {name: string}) {console.log (event)} 2. Dependency injection

2.1 Overview

Dependency injection (Dependency Injection) referred to as DI is a design principle in object-oriented programming, which is used to reduce the coupling between code.

Class MailService {constructor (APIKEY) {} class EmailSender {mailService: MailService constructor () {this.mailService = new MailService ("APIKEY1234567890")} sendMail (mail) {this.mailService.sendMail (mail)}} const emailSender = new EmailSender () emailSender.sendMail (mail)

The EmailSender class runs using the MailService class, the EmailSender class depends on the MailService class, and the MailService class is a dependency of the EmailSender class.

The coupling of the above writing is too high, and the code is not robust. If the MailService class changes the way parameters are passed, the way you write them in the EmailSender class will also change.

Class EmailSender {mailService: MailService constructor (mailService: MailService) {this.mailService = mailService;}} const mailService = new MailService ("APIKEY1234567890") const emailSender = new EmailSender (mailService)

When an EmailSender class is instantiated, its dependencies are injected into the class in the form of constructor constructor parameters, which is called dependency injection.

Dependency injection reduces the coupling between the code and increases the maintainability of the code. Changes to the code in the MailService class no longer affect the EmailSender class

2.2 DI framework

Angular has its own DI framework, which hides the process of implementing dependency injection, and developers can use complex dependency injection functionality with very simple code.

There are four core concepts in Angular's DI framework:

Dependency: instance object on which the component depends, service instance object

Token: gets the identity of the service instance object

Injector: the injector, which is responsible for creating instance objects of maintenance service classes and injecting service instance objects into components.

Provider: configure the injector's object, specify the service class that creates the service instance object, and get the identity of the instance object.

2.2.1 Injector Injectors

The injector is responsible for creating service class instance objects and injecting service class instance objects into the required components

Create an injector

Import {ReflectiveInjector} from "@ angular/core" / / Service class class MailService {} / / create the injector and pass in the service class const injector = ReflectiveInjector.resolveAndCreate ([MailService])

Get the service class instance object in the injector

Const mailService = injector.get (MailService)

The service instance object is in singleton mode, and the injector caches it after creating the service instance.

Const mailService1 = injector.get (MailService) const mailService2 = injector.get (MailService) console.log (mailService1 = mailService2) / / true

Different injectors return different service instance objects.

Const injector = ReflectiveInjector.resolveAndCreate ([MailService]) const childInjector = injector.resolveAndCreateChild ([MailService]) const mailService1 = injector.get (MailService) const mailService2 = childInjector.get (MailService) console.log (mailService1 = mailService2) / / false

The lookup of the service instance is similar to the function scope chain. If the current level can be found, the current level is used. If the current level cannot be found, go to the parent to find it.

Const injector = ReflectiveInjector.resolveAndCreate ([MailService]) const childInjector = injector.resolveAndCreateChild ([]) const mailService1 = injector.get (MailService) const mailService2 = childInjector.get (MailService) console.log (mailService1 = mailService2) / / true

2.2.2 provider Provider

Configure the object of the injector, specifying the service class that creates the instance object and the identity of the access service instance object

Const injector = ReflectiveInjector.resolveAndCreate ([{provide: MailService, useClass: MailService}])

The identity of the access dependent object can also be a string type.

Const injector = ReflectiveInjector.resolveAndCreate ([{provide: "mail", useClass: MailService}]) const mailService = injector.get ("mail")

UseValue

Const injector = ReflectiveInjector.resolveAndCreate ([{provide: "Config", useValue: Object.freeze ({APIKEY: "API1234567890", APISCRET: "500400300"})]) const Config = injector.get ("Config")

The instance object is loosely coupled with the external reference, and the external gets the instance object through the identity. As long as the identity remains the same, the change of the internal code will not affect the external.

On how to understand the Angular component communication and dependency injection to share here, I hope that the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can 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.