错误：使用“defer”时“observableFactory 不是函数”

Question

我创建了一个 Angular 9 指令，该指令仅在用户通过身份验证时才显示 HTMl 元素：

<div *authenticated>
  Message for Members
</div>

指令代码为：

@Directive({
  selector: '[authenticated]'
})

export class AuthenticatedDirective implements OnInit, OnChanges {

  constructor(private template: TemplateRef<any>, private container: ViewContainerRef, private authenticationService: AuthenticationService) { }

  ngOnInit() {

    this.authenticationService.isSignedIn().subscribe(x => {
      x ? this.container.createEmbeddedView(this.template) : this.container.clear();
    });

  }

  ngOnChanges() { 

    this.authenticationService.isSignedIn().pipe(
      distinctUntilChanged()
    ).subscribe(x => {
      x ? this.container.createEmbeddedView(this.template) : this.container.clear();
    });

  }

}

当我运行代码时出现错误：

TypeError: observableFactory is not a function. (In 'observableFactory()', 'observableFactory' is an instance of ZoneAwarePromise) — defer.js:8

我检查了authenticationService.isSignedIn() 方法，我有：

isSignedIn(): Observable<boolean> {

  return defer(this.manager.getUser()).pipe(map((user: User) => !user.expired));

}

this.manager.getUser() 方法返回一个Promise<User>，所以我使用defer 返回一个Observable。

如果我将defer 更改为from，那么它可以工作...

但是我不应该使用defer吗？

Answer 1

您只是以错误的方式使用defer()。它将回调作为每次新观察者订阅时调用的参数。当您将其用作 defer(this.manager.getUser()) 时，它会尝试使用来自 getUser() 的返回值作为一种方法，我猜它不是，所以它会引发错误。

您应该像这样使用它：

defer(() => this.manager.getUser())

现在每个新订阅都将调用此方法，defer() 将订阅它。我不知道你是否应该使用它。这取决于getUser() 在内部做什么。如果它总是返回相同的 Observable，那么你不需要defer。如果它返回不同的 Observables（例如使用不同的参数发出 HTTP 请求），那么您需要使用 defer()。