Creé una plantilla example.component.html que recibe un método como variable para su acción de clic:
<div> <button (click)="method()">click here</button> </div> en el archivo example.component.ts , el método proviene de una entrada (), por lo que puedo usar esta plantilla en múltiples situaciones:
@Component({ selector: 'example', templateUrl: './example.component.html', }) export class ExampleComponent implements OnInit { @Input() method; constructor() {} ngOnInit(): void {} }Aquí es donde se complica. En el componente principal, el método que se activará al hacer clic utiliza una variable que proviene de un observable:
parent-example.component.html
<example [method]="onClick"></example> parent-example.component.ts
@Component({ selector: 'parent-example', templateUrl: './parent-example.component.html', }) export class ParentExampleComponent implements OnInit { @Input() method; business; constructor(businessEntityService: BusinessEntityService) { businessEntityService.entities$.subscribe( data => (this.business = data), ); } onClick() { console.log(this.business); } ngOnInit(): void {} } Aunque el componente principal está suscribiendo a businessEntityService observable y he comprobado que tiene datos, cuando hago clic en el botón, la consola registra undefined .
Entiendo que esto probablemente tenga que ver con el alcance y la pila está buscando this.business en el componente de niños, sin embargo, me encantaría saber si hay alguna forma de llamar a un método que use una variable de una suscripción de su propio componente como Entrada ( ).
El this contexto se está perdiendo (creo). Puede suceder al pasar métodos de clase como parámetros
Reemplace el método ParentExampleComponent#onClick con:
onClick = () => { console.log(this.business); } Nota: detrás de escena, Typescript ahora tratará onClick como una propiedad de clase y moverá ese código al constructor. El uso de una función de flecha bloquea el contexto this de esa función