可观察作为指令的输入

Question

我有一个指令，我想添加 @Input observable 以通过该指令处理 http observable 的成功和失败场景

Directive({
        selector: '[search]'
    })

    export class SearchDirective implements OnInit, OnChanges, OnDestroy {
    @Input() searchObs = new Subject();

ngOnInit() {
this.sub = this.searchObs.subscribe(
    data => console.log(data),
    err => console.log(err._body),
    () => console.log('directive completed')
);
}

ngOnDestroy() {
this.sub.unsubscribe();
}

ngOnChanges(changes: SimpleChanges): void {
    // tslint:disable-next-line:forin
    for (let propName in changes) {
        let change = changes[propName];
        if (propName === 'searchObs') {
            this.searchObs = (change.currentValue as Subject<any>);
                this.sub = this.searchObs.subscribe(
                    data => console.log(data),
                    err => console.log(err._body),
                    () => console.log('directive change  completed')
                );
        }
      }
  }
}

我的组件 api 可观察到

  searchObs = new Subject();
this.apiservice.getData(args).subscribe((data) => {
      this.searchObs.next(data);
    }, err => {
      this.searchObs.error(err);
    });
  }

现在我得到了订阅的第一个值，无论它是指令中的成功还是错误，然后没有数据绑定到指令。

Answer 1

主要问题是 Subject 错误处理关闭了 Subject.error() 上的 Subject 所以我在错误后再次重新定义它

Component.ts

this.apiservice.getData(args).subscribe((data) => {
      this.searchObs.next(data);
    }, err => {
      this.searchObs.error(err);
       this.searchObs = new Subject();
    });
  }

可观察作为指令的输入

Observable as input for Directive

rxjs

angular-directive

angular