Question

我在 angular 10 中创建了三个库：两个是自定义组件，包含在我的应用程序（angular 11）中，第三个库（服务）旨在共享数据，我将使用这些库在前两个库之间传递信息图书馆。

在第一个库中，我定义了一个服务来激活 observable 的下一个事件。

订阅了两个库中的 observable 后（组件的 ngOnInit 内），问题是在第二个库中我无法拦截 observable 数据。

演示由包含在 SecondLibrary.component.ts 中的 console.log 语句给出，该语句不返回任何内容。

共享数据库

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
@Injectable({
  providedIn: 'root'
})
export class SharingDataService {
private id: BehaviorSubject<number> = new BehaviorSubject<number>(undefined);
sharedId = this.id.asObservable();
constructor() { }
sendId(id: number) {
      this.id.next(id);
    }
}

FirstLibrary.service.ts

import { SharingDataService } from 'sharingDataLibrary';
@Injectable({
  providedIn: 'root'
})
export class FirstLibraryService {
constructor(private _sharingDataService : SharingDataService ) {
}

public goToSecondLibrary(id) {
    console.log(id);
    this._sharingDataService.sendId(id);
  }
}

SecondLibrary.component.ts

import { SharingDataService } from 'sharingDataLibrary';
import { Subscription } from 'rxjs';
@Component({
  selector: 'second-library',
  templateUrl: './second-library.component.html',
  styleUrls: ['./second-library.component.scss']
})
export class SecondLibraryComponent implements OnInit {
sharedIdSubscription: Subscription;
constructor(private _sharingDataService : SharingDataService ) {
    }
ngOnInit(): void {
this.sharedIdSubscription = this._sharingDataService.sharedId.subscribe(id => {
      console.log(id);
      }
    });
}

演示由包含在 console.log 中的 SecondLibrary.component.ts 语句给出，该语句不返回任何内容。

Answer 1

在您的sharingDataLibrary 中，而不是：

<块引用>

...
sharedId = this.id.asObservable();
...

试试：

<块引用>

import { share } from 'rxjs/operators';
...
sharedId = this.id.asObservable().pipe(share());
...

来自 rxjs 文档：

<块引用>

share ：返回一个新的 Observable，它多播（共享）原始可观察。只要有至少一个订阅者这个 Observable 将被订阅并发出数据。当所有订阅者取消订阅后，它将取消订阅源 Observable。因为 Observable 是多播的，所以它使流变得很热。这是多播(() => new Subject()), refCount() 的别名。

在角度库之间共享数据

1 个答案: