Metoda care utilizează date preluate de la un observabile pe propria componentă a se întoarce nedefinit atunci când sunt utilizate ca date de Intrare()

0

Problema

Am creat un șablon example.component.html care primește o metoda ca o variabilă sale faceți clic pe acțiune:

<div>
  <button (click)="method()">click here</button>
</div>

pe example.component.ts fișier, metoda vine de la o intrare(), așa că am putea folosi acest model în mai multe situații:

@Component({
  selector: 'example',
  templateUrl: './example.component.html',
})
    export class ExampleComponent implements OnInit {
      @Input() method;
    
      constructor() {}
    
      ngOnInit(): void {}
    }

Aici devine complicat. La componentei părinte, metoda care va fi declanșat pe clic folosește o variabilă vine de la un observabile:

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 {}
}

Chiar dacă părintele componentă este abonarea businessEntityService observabile și am verifica-l are, de fapt, date, atunci când am faceți clic pe butonul, consola busteni undefined.

Am înțeles acest lucru, probabil are de-a face cu domeniul de aplicare și stiva este în căutarea pentru this.business la copii componentă, cu toate acestea mi-ar plăcea să știu dacă există oricum pentru a apela o metodă care utilizează o variabilă de la un abonament din propria componentă de Intrare().

angular rxjs typescript
2021-11-24 03:00:01
1

Cel mai bun răspuns

2

La this contextul este pierdut (cred). Se poate întâmpla atunci când trece clasa metode ca params

Înlocuiți ParentExampleComponent#onClick metoda cu:

onClick = () => {
    console.log(this.business);
}

Notă: în spatele scenei, mașina de Scris va trata acum onClick ca o clasă de proprietate, și se mută codul în constructor. Folosind o săgeată funcția blochează this contextul în care funcția de

2021-11-24 07:10:18

În alte limbi

Această pagină este în alte limbi

Русский
..................................................................................................................
Italiano
..................................................................................................................
Polski
..................................................................................................................
한국어
..................................................................................................................
हिन्दी
..................................................................................................................
Français
..................................................................................................................
Türk
..................................................................................................................
Česk
..................................................................................................................
Português
..................................................................................................................
ไทย
..................................................................................................................
中文
..................................................................................................................
Español
..................................................................................................................
Slovenský
..................................................................................................................