【问题标题】:Angular2 Observer goes missingAngular2 观察者不见了
【发布时间】:2023-04-05 02:24:01
【问题描述】:

我很难坚持观察者。我有一个创建 observable 的组件,在回调中,我捕获了观察者。但后来,我无法得到那个观察者 - 好像我有另一个组件实例。

例子:

import {Component} from 'angular2/core';
import {Observable} from 'rxjs/Observable';

@Component({
  selector: 'users-table',
  templateUrl: './components/users/users-table.html',
  // template: '<button (click)="popup({value: 2})">Clickme</button>'
})
export class UsersTableComponent {

  public userClicked$: Observable<any>;
  public observer: any;
  public thing: number;
  constructor() {

    console.log('Starting UsersTable component');
    this.thing = 1;
    this.userClicked$ = new Observable(observer => {

      this.thing = 2;
      console.log('Observer received:', observer);
      this.observer = observer;
      this.observer.next('Val 1'); // I receive this in an outside component
    }).share(); // This supposedly makes the observable *hot*
  }

  public handle(value) {

    console.log('Value:', value);
    console.log(this.userClicked$);
    console.log('thing:', this.thing); // This is set back to "1
    this.observer.next(user);       // this.observer is undefined
                                    // so it fails here
  }
}

请注意,我是从另一个组件订阅这个的,我确实得到了初始测试值 ('val 1')

另一个组件在监听,在“ngAfterViewInit”中订阅,基本是这样的:

this.usersTableComponent.userClicked$.subscribe(val => { console.log('heard ya:' val); });

我是否遗漏了一些明显的东西?我可以以某种方式直接使用点击处理程序来传递点击用户的东西吗? (表格中的一行)?

Angular2 Beta 8。

【问题讨论】:

    标签: angular observable


    【解决方案1】:

    传递给new Observable(observer =&gt; { ... }) 的回调仅在调用this.userClicked$.subscribe(...) 时执行,因此,没有订阅者就没有this.observer

    在这种情况下跳过发射:

    this.observer && this.observer.next(user);
    

    【讨论】:

    • 嗯,我正在从另一个组件订阅这个 - 我得到了那个初始值。我什至把它弄热了,让我更新一下。
    • 只需检查this.observer &amp;&amp; this.observer.next(user);,如果您没有订阅者,则发出事件是没有意义的。
    • 谢谢。我已经编辑了这个问题,以明确我确实订阅,并且我确实得到了我发出的初始Val 1。后一个没有发送,因为我的模板似乎看到了组件的不同实例。
    • 我想我们需要查看其他组件以及您如何订阅它。我在回答这个问题时使用了非常相似的代码(包括 Plunker)
    • 你能创建一个 Plunker 吗?
    猜你喜欢
    • 1970-01-01
    • 2018-11-22
    • 2014-03-24
    • 1970-01-01
    • 2018-09-29
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2022-12-14
    相关资源
    最近更新 更多