He creado una plantilla example.component.html
que recibe un método como una variable a su haga clic en acción:
<div>
<button (click)="method()">click here</button>
</div>
en el example.component.ts
archivo, el método trata de una entrada(), así que puedo usar esta plantilla en varias situaciones:
@Component({
selector: 'example',
templateUrl: './example.component.html',
})
export class ExampleComponent implements OnInit {
@Input() method;
constructor() {}
ngOnInit(): void {}
}
Aquí es donde se pone complicado. En el componente de los padres, el método que se activan al hacer clic se utiliza una variable que viene a partir 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 es la suscripción businessEntityService
observables y he de verificación tiene en datos de hecho, cuando hago clic en el botón, los registros de la consola undefined
.
Entiendo que esto probablemente tiene que ver con el alcance y la pila está buscando this.business
en los niños de componentes, sin embargo, me gustaría saber si hay de todos modos para llamar a un método que utiliza una variable a partir de una suscripción de su propio componente de Entrada().