Un ejemplo del principio de inyección e inyección de dependencia angular, depuración de un solo paso

Defina una clase de servicio abstracta:

export abstract class GreetingService {
    abstract greet(name: string): string;
 }

Defina una clase concreta para implementar la clase abstracta:

import { Injectable } from '@angular/core';
import { GreetingService } from './greeting.service';

@Injectable({ providedIn: 'root'})
export class EnglishGreetingService extends GreetingService {
   greet(name: string): string {
      return 'Hello ' + name;
   }
   constructor(){
      super();
      console.log('English class created!');
   }
}

Utilice la anotación @Injectable para marcar que esta clase se puede inyectar en otros componentes.

Inyección de parámetros en el constructor:

Depurando el principio de inyección de dependencia:

Utilice la fábrica de componentes de la aplicación para crear una instancia de componente:

Nuestra clase de implementación de servicio modificada por la anotación Angular Injectable se ha analizado con éxito y apareció en el código de implementación del marco Angular, almacenado a través de la variable token:

En la variable lView devuelta por el método de marco angular getLView, puede ver el código de implementación de la plantilla del componente de la aplicación:

Aquí se genera una instancia de la clase de implementación del servicio:

Para obtener más artículos originales de Jerry, siga la cuenta pública "Wang Zixi":