在TypeScript回调方法中声明类属性

Question

我有一种方法可以从pub子消息服务订阅事件。 在回调中，我想定义一个类属性。 当我尝试分配属性值时，它以未定义的形式返回。 我知道对“ this”的引用已从类更改为方法，但我需要它具有访问类的“ this”属性的权限。 如何在回调方法中将值分配给类属性“ this.icon”？

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs/Subscription'
import { Events } from '../shared/messages/events';
import { MessageService } from '../shared/messages/message.service';

export class Component implements OnInit, OnDestroy {

  public icon: string;
  private subscription: Subscription;

  constructor() { this.btnClickSubscribe();}

  private btnClickSubscribe(): void {

     this.subscription = this.messageService
        .subscribe(Events.btnClick, (payload) => {

        this.icon = 'fa-trash-o'; 

        console.log(this.icon) //logs the correct value, 'fa-trash-o' 
        //but it's only available inside this context. I need it in the 
        //class context     
  });
 }

Answer 1

由于这是一个异步事件， this.icon无论您执行什么操作， this.icon最初在回调之外都是未定义的。 选中此复选框以获取更多信息： 如何从angular2中的Observable / http / async调用返回响应？

您提到过要通过@Input()将icon传递给子@Input()然后利用子ngOnChanges中的ngOnChanges来捕获对icon发生的更改。 在ngOnChanges您可以创建一个条件，该条件将值设置为icon 后执行您想执行的任何逻辑，因此在您的孩子中这样的操作：

@Input() icon;

ngOnChanges() {
  if(this.icon) {
    console.log('icon is set, now do something with it!')
  }
}

并且，如果您对视图有疑问，可以使用一些可行的解决方案，例如使用安全导航运算符，在此处获取更多信息： 无法读取未定义的属性“ totalPrice”

这是一个

演示

希望这可以帮助！ :)