Estoy intentando que el componente1 active una función en el componente2, pero el componente2 necesita permanecer genérico para que cualquier componente pueda acceder a él. Sin hacerlo genérico, mi código se ve así:

Componente1:

@Output() component2function = new EventEmitter<any>();
...
this.component2function.emit({ param1, param2 });

Selector de componentes2:

<component1 (component2function)="component2function($event)"> </component1>

Esto debería activar component2function pero ahora quiero activar esa misma función sin usar explícitamente el selector component1, de modo que component2function pueda ser activado por componentes que no sean el componente1. ¿Cómo puedo hacer esto?

1
Matt123 10 dic. 2019 a las 17:49

2 respuestas

La mejor respuesta

En su lugar, pondría la función en un servicio compartido. De esa manera, todo lo que necesita hacer es proporcionar el servicio a través del constructor de cada componente. El componente 1, el componente 2 y el componente 3 pueden acceder fácilmente a esta función compartida.

Service.ts

@Injectible({
   providedIn: "root"
})
export class SharedService {
    sharedFunction() {
        let theSolution = ....;

        return theSolution;
    }
}

Luego en el component.ts

@Component({
  selector: "component1",
  templateUrl: "./component1.component.html",
  styleUrls: ["./component1.component.css"]
})
export class Component1 implements OnInit {

    constructor(private sharedService: SharedService) {}

    ngOnInit() {
        this.genericFunction();
    }

    genericFunction() {
        this.sharedService.sharedFunction();
    }
}

Desde allí, puede llamar a la función de servicio directamente desde el html o llamar a la función del componente como se indica arriba desde el html. Si está administrando datos, el estado será más predecible en un servicio compartido.

1
thenolin 10 dic. 2019 a las 15:27

Por lo tanto, necesita un acuerdo mínimo, que los componentes implementados tienen este método. Puede lograr esto definiendo una interfaz, que es heredada por component1, ...:

interface MyInterface {
    component2function: EventEmitter<any>;
}

(Soruce: ¿Cómo conectar los decoradores Output () y Input ()? )

De esta manera, no tiene que saber exactamente qué tipo de componente es, pero puede asegurarse de que tenga este método.

1
Stefan 10 dic. 2019 a las 14:55