下一个可观察后的 Angular 回调

Question

我需要能够在处理完 Observable.next() 之后执行回调。

我有一个组件“A”，它有一个主题使用 Subject.next() 发送通知。我有一个组件“B”，它订阅了 Subject.asObservable() 以执行代码。

当 A 在 B 旁边触发时，我想在 Subject.next() 执行后执行一些代码。

服务

 private submitSubject = new Subject<String>();
 private submitObservable = this.submitSubject.asObservable();

组件 A

 public onClickSubmit():void {
      ....
      this.xxxxService.executeSubmit()
  }

组件 B

ngOnInit() {
        // Subscribe to parent Submit button
        this.subscription = this.xxxService.getSubmitObservable().subscribe(value => {...} );
  }

我希望能够做类似的事情

obervable.next().subscribe(e => {})

Answer 1

事实上我只看到了2个解决方案- 有 2 个主题/观察对象:1 个用于执行，1 个用于结果- 有 1 个 subject/obersvable :使用 subject.next 通知和 subject.complete 实现，但在这种情况下，您必须为每次执行重新实例化 subject/obersvable。

1)方案一

组件 A(父级)订阅 resultNextSubject(在 'next' 方法上)

组件 B(子)订阅 nextSubject(在 'next' 方法上)

在组件 A 中，当您单击“下一步”按钮时，它会调用 nextSubject.next 来通知组件 B 提交(验证保存)

组件B执行提交并调用resultNextSubject.next()通知结果给组件A组件 A 接收 resultNext 通知并路由到另一个组件进行显示等..

组件 A(父级)

@Component({
  selector: 'pi-xxx',
  providers: [xxxService],
  templateUrl: './xxx.component.html',
  styleUrls: ['./xxx.component.scss']
})
export class xxxAComponent implements OnInit, OnDestroy {

  constructor(private router: Router, private xxxService: XxxService) {}

  ngOnInit() {  
    ...    
      // Subscribe to child notification to navigate to a tab
      this.subscription = this.xxxService.getNextResultObservable().subscribe((value) => {
    ..routing..);
     }
  }

  ngOnDestroy(): void {
      this.subscription.unsubscribe();
  }

  public onClickNext(): void {
      ...
      this.xxxService.executeNext();
  }

}

组件 B( child )

@Component({
  selector: 'pi-tab2',
  templateUrl: './tab2.component.html',
  styleUrls: ['./tab2.component.scss']
})
export class Tab2Component implements OnInit, OnDestroy {

    private subscription:Subscription;

    constructor(private xxxService:XxxService) { }

    ngOnInit() {
        // Subscribe to parent Next button
        this.subscription = this.xxxService.getNextObservable().subscribe(value => {
            this.submit();
        });
    }

    ngOnDestroy(): void {
        this.subscription.unsubscribe();
    }

    submit() {
      ...
      // Notify result to parent
      this.xxxService.getNextResultSubject().next();
    }

}

2)方案2

组件 A(父级)订阅 nextSubject(在 'complete' 方法上)

组件 B(子)订阅 nextSubject(在 'next' 方法上)

在组件 A 中，当您单击“下一步”按钮时，它会调用 nextSubject.next 来通知组件 B 提交(验证保存)

组件B执行提交并调用nextSubject.complete()通知结果给组件A

组件 A 接收 resultNext(完成)通知并路由到另一个组件进行显示。但是组件 A 必须在路由之前重新实例化主题及其可观察对象。

组分A

ngOnInit() {
  .... init
}

public onClickNext(): void {
      ....
          // Subscribe to wait for child result notification
          this.xxxService.nextObservable().subscribe({
              complete: () => {
                  // Must reset subject & observable before routing next child
                  this.xxxService.nextSubject =  new Subject();
                  this.xxxService.nextObservable = this.xxxService.nextSubject.AsObservable()
                  ....routing...
              }}
           );

          // Notify child
          this.xxxService.executeNext();
      }
  }

B组份

ngOnInit() {
            // Subscribe to parent Next button
            this.subscription = this.xxxService.getNextObservable().subscribe(value => {
                this.submit();
            });
        }

        ngOnDestroy(): void {
            this.subscription.unsubscribe();
        }

        submit() {
          ...
          // Notify result (complete) to parent
          this.xxxService.getNextSubject().complete();
        }