Angular: почему я не могу использовать метод моего компонента в качестве заметного обратного вызова для обновления свойств в компоненте?

Question

Я следую по этой ссылке о том, как использовать службу, чтобы сделать http-запрос в Angular и обновить мой список элементов в компоненте.Я могу успешно сделать это с помощью жирной стрелки в качестве заметного обратного вызова.Но когда я пытался использовать метод в своем компоненте, он не смог обновить список элементов.

, например:

import { Component, OnInit } from '@angular/core';
import { BlogService } from '../blog.service';
import { Blog } from '../blog';
import { Observable, of } from 'rxjs';

@Component({
  selector: 'app-articles',
  templateUrl: './articles.component.html',
  styleUrls: ['./articles.component.css']
})
export class ArticlesComponent implements OnInit {
  blogs: Blog[];
  constructor(private blogService: BlogService) { }

  ngOnInit() {
    // const handler = (incomingBlogs: Blog[]) => {
    //   this.blogs = incomingBlogs;
    //   console.log("we get: ", this.blogs);
    // }

    const observable: Observable<Blog[]> = this.blogService.getBlogs();
    // observable.subscribe(handler); <===== this will work
    // observable.subscribe(incomingBlogs => {this.blogs = incomingBlogs;  console.log("fat get: ", this.blogs);}); <====== this also work
    observable.subscribe(this.handler); // <===== this failed. 
    console.log("this in init", this);
  }

  handler(incomingBlogs: Blog[]) {
    this.blogs = incomingBlogs;
    console.log("we get: ", this.blogs);
    console.log("this in handler", this); //seems the this keyword refers to something different than the object itself.
  }

}

Я попробовал три подхода для обновления списка блогов

1. жирная стрелка внутри подписки как обратный вызов.это работает!

2. определяет константу и назначает ей жирную стрелку.передать его функции подписки.Это тоже работает, как и вариант 1. И я понимаю, что они ведут себя одинаково.

3. определяют метод в том же классе (компонент).Используйте его как обратный вызов для функции подписки.Метод называется.Но ключевое слово this, похоже, не относится к компоненту.Почему это отличается?Я понимаю, что в мире javascript ключевое слово function дает вам совершенно другое this.Но почему это происходит в методе класса в TypeScript?Почему this означает здесь разные объекты?Почему жирная стрела работает?

Я уже искал ответы раньше, но не получилось.(Должно быть, я не использовал правильные ключевые слова).Спасибо за вашу помощь!

Answer 1

Толстые функции стрелок всегда связаны с объектом, в котором они определены, функция будет связана с объектом, из которого они вызваны. Измените свой обработчик на функцию стрелки.

handler = (incomingBlogs: Blog[]) => {
    this.blogs = incomingBlogs;
    console.log("we get: ", this.blogs);
    console.log("this in handler", this); //seems the this keyword refers to something different than the object itself.
  }

Если вы установите точку останова в текущей функции, вы увидите, что это указывает на наблюдаемую функцию, из которой она вызывается.

Если вы хотите использовать обычную функцию, вы можете передать ее как параметр

  handler(incomingBlogs: Blog[], controller: ArticlesComponent) {
    controller.blogs = incomingBlogs;
    console.log("we get: ", controller.blogs);
    console.log("this in handler", controller); //seems the this keyword refers to something different than the object itself.
  }

Но мой совет - не подписываться на наблюдаемые в контроллере и использовать асинхронный канал в вашем представлении.

blogs$ = this.blogService.getBlogs();

В вашем TypeScript и в вашем представлении

<ng-container *ngIf="blogs$ | async as blogs">
    Use blogs here as you would have before
    {{blogs | json}}
</ng-container>

Тогда у вас есть представление, управляющее вашей подпиской, и вам не нужно беспокоиться о бесхозных подписках.