代码之家 › 专栏 › 技术社区 › Yoann Picquenot

角度,订阅阵列不工作

angular2-observables typescript angular html

Yoann Picquenot · 技术社区 · 6 年前

我正在发出警报。服务我的服务包含一个名为Alert的模型数组。

这是警报。服务

@Injectable()
export class AlertService {

  private queue: Alert[] = new Array<Alert>();

  constructor() { }

  getInstance() : Observable<Alert[]> {
    return of(this.queue);
  }

  push(type: string, title: string, message: string) {
    let alert = new Alert(type, title, message);

    this.queue.push(alert);
    window.setTimeout(_ => {
      this.pop();
    },3000);
  }

  pop() {
    this.queue.pop();
  }
}

从我的警报。组件,我调用此服务并订阅队列的可观察对象:

export class AlertComponent implements OnInit {

  public alert: string = `
  <div class="alert [type]">
    <span>[title]</span>
    <p>[message]</p>
  </div>`;

  constructor(private alertService: AlertService) { }

  ngOnInit() {
    this.alertService.getInstance().subscribe(val => {
      console.log(val);
    });
  }

  success() {
    this.alertService.push('error', 'ninja', 'hahahahahahah hahhahaha hahah hah');
  }

}

在我的模板中,我单击一个按钮来触发该方法 success() (称为)。

但是控制台。log(val)只返回一次值。这是实例化队列服务数组时的值。

我做错了什么?

谢谢你的帮助!

1 回复 | 直到 6 年前

Yoann Picquenot 6 年前

最后

我管理自己在数组中使用一个BehaviorSubject。

@Injectable()
export class AlertService {

  private queue: Alert[] = new Array<Alert>();
  private behaviorSubjectQueue: BehaviorSubject<Alert[]> = new BehaviorSubject<Alert[]>(this.queue);

  constructor() {
  }

  getInstance() {
    return this.behaviorSubjectQueue;
  }

  push(type: string, title: string, message: string) {
    let alert = new Alert(type, title, message);

    this.queue.push(alert);
    this.behaviorSubjectQueue.next(this.queue);
    window.setTimeout(_ => {
      this.pop();
    },3000);
  }

  pop() {
    this.queue.pop();
    this.behaviorSubjectQueue.next(this.queue);
  }
}

组件保持不变,但在每次推送和弹出操作时都会收到通知。

谢谢大家的帮助!

推荐文章

Gatschet · 可观察到。map setTimeout函数,返回类型为angular 5

6 年前

Simm28 · 解决6个以上的forkJoin参数?

6 年前

Yoann Picquenot · 角度,订阅阵列不工作

6 年前

naoru · 角度HttpInterceptor修改错误对象

6 年前

Alexander Mills · 比较多个行为子对象的最新值

6 年前

RobrechtVM · 避免以角度在[src]中重新加载图像

6 年前

Lior CHAMLA · AngularFire2 toPromise()方法的异步/等待不起作用?

6 年前

Wagner Moreira · 订阅订阅和取消订阅不是一项功能

7 年前

Saurin · 角度2+承诺、可观察和异步管道

7 年前

Praveen Puglia · 角度中嵌套http请求的嵌套观察值

7 年前