所以我只做一个HTTP请求,将observable存储到某个变量并在那里操作它.代码有效,但我不确定我是否正确使用.publishReplay(1).refCount(),还是应该使用connect？或者,我甚至需要这些吗？此外,是否有任何可能的内存泄漏可能来自此服务？

这是服务代码：

@Injectable()
export class UsersApiService {

  private readonly baseUrl: string = 'https://reqres.in/api/users';
  resource$: Observable<any>;

  constructor(private http: HttpClient) {
    this.resource$= this.http.get<IUserDetails[]>(this.baseUrl).pipe(
      tap((data) => {
        console.log('"getUsers" successfully called!');
      }),map((data: any) => {
        return data.data;
      })
    ).publishReplay(1).refCount();
  }

  getUsers(): Observable<IUser[]> {
    return this.resource$.pipe(
      map((data: IUserDetails[]) => {
        return <IUser[]>data.map((u) => {
          return {
            id: u.id,name: `${u.first_name} ${u.last_name}`
          };
        });
      })
    );
  }

  getUserById(id: number): Observable<IUserDetails> {
    return this.resource$.pipe(
      map((data) => {
        return <IUserDetails>data.find(x => x.id === id);
      })
    );
  }

}

而工作示例：http://plnkr.co/edit/3S8iKbvrrGOj9netd8sM?p=preview

I’m not sure if I’m using .publishReplay(1).refCount() correctly

是的,你是.您也可以使用shareReplay(1).

or should I use connect?

当第一个订阅者出现时,refCount()已经为您连接(并且当所有观察者都取消订阅时断开连接).

do I even need any of that

如果你想把它作为一个可观察的,是的.否则,您将一遍又一遍地查询后端.但是,你当然也可以记住最后一次发射：

private resource: Observable<IUserDetails[]>;

constructor(http: HttpClient) {
    this.http.get(/* … */).subscribe(data => this.resource = data);
}

getUserById(id: number): IUserDetails {
    return this.resource.find(x => x.id === id);
}

Also,is there any possible memory leak that Could come out of this service?

不,因为HttpClient完成了它的返回observable,这意味着你的多播observable的源被断开了.

但是如果我在我的组件中创建一个无限的Observable(例如FormGroup.valueChanges或QueryList.changes),那么这个将被包含它的组件销毁,所以我认为即使我不这样做它们也不会有内存泄漏取消订阅.

这是一个简单的例子：

@Component({})
export class DummyComponent {
    form: FormGroup;

    constructor(private fb: FormBuilder) {
        this.form = this.fb.group({
            firstName: [''],lastName: ['']
        });
        this.form.valueChanges.subscribe(
            x => console.log(x)
        );
    }
}

在这里,我没有取消订阅this.form.valueChanges;当我的组件被销毁时,this.form.valueChanges也将被销毁.

在这种情况下是否会出现内存泄漏？

对于你的特殊情况,我认为你有一个观点.

当我在同一组件中有大量订阅时,我做的一件事如下.

首先,我创建“订阅”,一个空的订阅类型数组.

private subscriptions: Subscription[] = [];

然后,每次我需要订阅时,我将它推入数组

this.subscriptions.push(this.form.valueChanges.subscribe(x => console.log(x)));

在ngOnDestroy中,我取消订阅数组中的每个订阅.

ngOnDestroy(): void {
  this.subscriptions.forEach((elem) => { elem.unsubscribe(); })
}

<div *ngFor='let item of items'>
   <div [ngSwitch]="item.view">
        <view-one *ngSwitchCase="'one'"></view-one>
        <view-two *ngSwitchCase="'two'"></view-two>
        <view-three *ngSwitchCase="'three'"></view-three>
    </div>
</div>

解决方法

@Component({
    selector: "my-item",template: `
        <div #placeholder></div>
    `
})
export class MyItemComponent implements AfterViewInit {
    @input() item: any;
    @ViewChild("placeholder",{read: ViewContainerRef}) placeholderRef: ViewContainerRef;

    constructor(
        private componentFactoryResolver: ComponentFactoryResolver) {
    }

    ngAfterViewInit() {
        switch(this.item.view) {
            case "one":
                this.loadItem(OneItemComponent);
            case "two":
                this.loadItem(TwoItemComponent);
            default:
                throw new Error("UnkNown item!");
        }
    }

    private loadItem(component: Type<any>) {
        const factory = this.componentFactoryResolver.resolveComponentFactory(component);
        const componentRef = this.placeholderRef.createComponent(factory);
        componentRef.instance.item = this.item;
        componentRef.changeDetectorRef.detectChanges();
    }
}

<my-item *ngFor="let item of items" [item]="item"></my-item>

解决方法

import { ConnectableObservable } from "rxjs"
import { publish } from "rxjs/operators";

const myConnectableObservable: ConnectableObservable<MyClass> = myService.getobservable().pipe(publish()) as ConnectableObservable<MyClass>;