angular - 有人可以解释 Angular 订阅方法吗

Question

我只是通过阅读 v.4.0 的教程来学习 Angular。我刚到 Section 6 (路由)那个教程，我一直在理解 subscribe 方法。如果能对此进行更多解释，我将不胜感激。

我知道 ngOnInit() 只被调用一次，所以这就是我们在这里使用 subscribe() 的原因。但是什么事件让 subscribe() 被触发呢？它是否仅在再次请求包含该特定 HeroDetailComponent 的页面时触发。据我了解，它必须附加到 ActivatedRoute.params 上的某种“onChange”事件，并在用户请求同一页面(包含 HeroDetailComponent)时触发。

一旦 ActivatedRoute.params 改变了会发生什么？我的意思是 - 如果 ngOnInit() 只执行一次，this.hero 怎么会被赋予一个新值。我很好奇它是怎么知道执行 this.heroService.getHero(+params['id']) 并将返回值赋给 this.hero 的？

教程中的完整源代码 here

// mock-heroes.ts
export const HEROES: Hero[] = [
  { id: 11, name: 'Mr. Nice' },
  { id: 12, name: 'Narco' },
  { id: 13, name: 'Bombasto' },
  { id: 14, name: 'Celeritas' },
  { id: 15, name: 'Magneta' },
  { id: 16, name: 'RubberMan' },
  { id: 17, name: 'Dynama' },
  { id: 18, name: 'Dr IQ' },
  { id: 19, name: 'Magma' },
  { id: 20, name: 'Tornado' }
];

// hero.service.ts
@Injectable()
export class HeroService {
    getHeroes(): Promise<Hero[]> {
        return Promise.resolve(HEROES);
    }
    getHero(id: number): Promise<Hero> {
      return this.getHeroes()
         .then(heroes => heroes.find(hero => hero.id === id));
    }

// hero-detail.component.ts
@Component({...})
export class HeroDetailComponent implements OnInit{
    constructor(
        private heroService: HeroService,
        private route: ActivatedRoute,
        private location: Location
    ) {}

    ngOnInit(): void {
      this.route.params
        .switchMap((params: Params) => this.heroService.getHero(+params['id']))
        .subscribe(hero => this.hero = hero);
    }

编辑:我刚找到一个 great article如果有人在理解这些概念时遇到问题，这可能会有用。

Answer 1

1) subscribe() 是 rxjs 的一部分，而不是 Angular 。要完全理解它是如何工作的 - 请转到 rxjs 文档 :)

2) 对于基本的理解，假设您有类似这样的类/对象(真正的 Observable 更复杂，那只是伪代码):

type CallbackFunction = () => void;

class ObservableImitation{

    private subscribers: CallbackFunction[] = [];

    constructor(){};

    public subscribe(callback: CallbackFunction){
        this.subscribers.push(callback);
    }

    public next(value?: any){
        this.subscribers.forEach((callback: CallbackFunction) => callback(value));
    }

}

基本上，当您.subscribe() 时，您的回调会添加到数组中。当其他东西在 Observable 上调用 .next() (在 Router 的情况下它是在其代码内部调用的)它开始循环所有 订阅者。

为了防止意外的内存泄漏和错误，当您的组件被销毁时(如果它完全被销毁，例如，一些抽象的NavBarComponent)，您最好应该unsubscribe() > 始终停留在屏幕上)。

更重要的是typescript/js/es如何解析this进行回调。但这是另一个话题的问题。在这一点上你必须考虑的一切，一旦你这样做了

.subscribe(() => {
    this.doSomething();
    this.doSomethingElse();
});

或

.subscribe(() => this.doSomething());

或

.subscribe(this.doSomething.bind(this));

一切正常。