Метод, который использует данные, полученные из наблюдаемого на своем собственном компоненте, возвращает неопределенные значения при использовании в качестве входных данных()

0

Вопрос

Я создал шаблон example.component.html который получает метод в качестве переменной для своего действия щелчка:

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

на example.component.ts файл, метод исходит из ввода(), поэтому я могу использовать этот шаблон в нескольких ситуациях:

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

Вот тут-то все и усложняется. В родительском компоненте метод, который будет запущен при нажатии, использует переменную, полученную из наблюдаемого:

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

Даже если родительский компонент подписывается businessEntityService наблюдаемый, и я проверил, что у него есть фактические данные, когда я нажимаю кнопку, консоль регистрируется undefined.

Я понимаю, что это, вероятно, связано с областью действия, и стек ищет this.business однако в дочернем компоненте я хотел бы знать, можно ли в любом случае вызвать метод, который использует переменную из подписки из своего собственного компонента в качестве входных данных().

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

Лучший ответ

2

То this контекст теряется (я думаю). Может произойти при передаче методов класса в качестве параметров

Замените ParentExampleComponent#onClick способ с:

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

Примечание: за кулисами Typescript теперь будет обрабатывать onClick как свойство класса и перемещает этот код в конструктор. Использование функции со стрелкой блокирует this контекст этой функции

2021-11-24 07:10:18

На других языках

Эта страница на других языках

Italiano
..................................................................................................................
Polski
..................................................................................................................
Română
..................................................................................................................
한국어
..................................................................................................................
हिन्दी
..................................................................................................................
Français
..................................................................................................................
Türk
..................................................................................................................
Česk
..................................................................................................................
Português
..................................................................................................................
ไทย
..................................................................................................................
中文
..................................................................................................................
Español
..................................................................................................................
Slovenský
..................................................................................................................