Javascript 基于角度分量中不同数据流的分量间单/多时间公共可观测订阅的最佳方法

使用不同的数据响应订阅的最佳方式是在角度组件内部使用单个可观测数据，以及在其他组件中使用相同的可观测数据进行多用途订阅

我使用以下方法：

myservice:

CommonFormObservable=new Subject();

// first way
this.myService.CommonFormObservable.pipe(filter((data: any) =>
        (data.Type == "DayData" && data.DataType == "entry" && data.MessageKind =="READ"))).
        pipe(this.compUntilDestroyed()).subscribe((message: MessageModel)=>{
        //to do with message
        });
        
this.myService.CommonFormObservable.pipe(filter((data: any) =>
        (data.Type == "DayData2" && data.DataType == "out" && data.MessageKind =="READ"))).
        pipe(this.compUntilDestroyed()).subscribe((message: MessageModel)=>{
        //to do with message
        });

this.myService.CommonFormObservable.pipe(filter((data: any) =>
        (data.Type == "DataSet" && data.MessageKind =="CREATE"))).
        pipe(this.compUntilDestroyed()).subscribe((message: any)=>{
        //to do with message
        });

myComponent 1:

CommonFormObservable=new Subject();

// first way
this.myService.CommonFormObservable.pipe(filter((data: any) =>
        (data.Type == "DayData" && data.DataType == "entry" && data.MessageKind =="READ"))).
        pipe(this.compUntilDestroyed()).subscribe((message: MessageModel)=>{
        //to do with message
        });
        
this.myService.CommonFormObservable.pipe(filter((data: any) =>
        (data.Type == "DayData2" && data.DataType == "out" && data.MessageKind =="READ"))).
        pipe(this.compUntilDestroyed()).subscribe((message: MessageModel)=>{
        //to do with message
        });

this.myService.CommonFormObservable.pipe(filter((data: any) =>
        (data.Type == "DataSet" && data.MessageKind =="CREATE"))).
        pipe(this.compUntilDestroyed()).subscribe((message: any)=>{
        //to do with message
        });

//第二条路

this.myService.CommonFormObservable.pipe(this.compUntilDestroyed()).subscribe((message: MessageModel)=>{
        if(data.Type == "DayData2" && data.DataType == "out" && data.MessageKind =="READ"){
        //to do with message
        }
        else if(data.Type == "DayData" && data.DataType == "entry" && data.MessageKind =="READ"){
        //to do with message
        }   
        
        });

myComponent 2:

CommonFormObservable=new Subject();

// first way
this.myService.CommonFormObservable.pipe(filter((data: any) =>
        (data.Type == "DayData" && data.DataType == "entry" && data.MessageKind =="READ"))).
        pipe(this.compUntilDestroyed()).subscribe((message: MessageModel)=>{
        //to do with message
        });
        
this.myService.CommonFormObservable.pipe(filter((data: any) =>
        (data.Type == "DayData2" && data.DataType == "out" && data.MessageKind =="READ"))).
        pipe(this.compUntilDestroyed()).subscribe((message: MessageModel)=>{
        //to do with message
        });

this.myService.CommonFormObservable.pipe(filter((data: any) =>
        (data.Type == "DataSet" && data.MessageKind =="CREATE"))).
        pipe(this.compUntilDestroyed()).subscribe((message: any)=>{
        //to do with message
        });

那么，从性能和内存的角度来看，上面哪一个是最好的方法？还有其他最好的方法吗

请给我提个建议

---

谢谢。

处理角度观测值的最佳方法是尽可能避免组件中的.subscribe函数

要做到这一点，您应该在组件和异步管道中实现//第一种方式，它将在创建/销毁组件时自动处理订阅/取消订阅

在组件中

commonFormData$ = this.myService.CommonFormObservable.pipe;

在模板中

<div *ngIf="commonFormData$ | async as data">
  <div
    *ngIf="data.Type == 'DayData' && data.DataType == 'entry' && data.MessageKind =='READ'"
  ></div>
  <div
    *ngIf="data.Type == 'DayData2' && data.DataType == 'out' && data.MessageKind =='READ'"
  ></div>
</div>

---

处理角度观测值的最佳方法是尽可能避免组件中的.subscribe函数

要做到这一点，您应该在组件和异步管道中实现//第一种方式，它将在创建/销毁组件时自动处理订阅/取消订阅

在组件中

commonFormData$ = this.myService.CommonFormObservable.pipe;

在模板中

<div *ngIf="commonFormData$ | async as data">
  <div
    *ngIf="data.Type == 'DayData' && data.DataType == 'entry' && data.MessageKind =='READ'"
  ></div>
  <div
    *ngIf="data.Type == 'DayData2' && data.DataType == 'out' && data.MessageKind =='READ'"
  ></div>
</div>

< /代码>  @ BelnasSAMPARA是正确的，考虑尽可能使用异步管道，避免手工订阅组件。

我会这样做：

const entryFormData$=this.myService.CommonFormObservable
.烟斗(
过滤器（（数据：any）=>（data.Type==“DayData”和&data.DataType==“entry”和&data.MessageKind==“READ”）），
此.ComputildRestoryed（），
map（（数据：any）=>/*执行显示内容所需的任何操作（如格式化）*/）；
const outFormData$=this.myService.CommonFormObservable
.烟斗(
过滤器（（数据：任意）=>（data.Type==“DayData”和&data.DataType==“out”和&data.MessageKind==“READ”）），
此.ComputildRestoryed（），
map（（数据：any）=>/*执行显示内容所需的任何操作（如格式化）*/）；

在模板中：

{{entryFormData$| async}
{{outFormData$| async}

async
管道可以在任何地方使用，包括
ngIf
、
ngFor
等。
如果您需要在几个地方的值，您可以考虑这样做，以避免多次使用管道：

<ng-container *nIf="{{ entryFormData$ | async as entryFormData }}"
  <div>{{ entryFormData.foo }}</div>
  <div>{{ entryFormData.bar }}</div>
</ng-container>

<代码>  @ BelnasSAMPARA是正确的，考虑尽可能使用异步管道，避免手工订阅组件。

我会这样做：

const entryFormData$=this.myService.CommonFormObservable
.烟斗(
过滤器（（数据：any）=>（data.Type==“DayData”和&data.DataType==“entry”和&data.MessageKind==“READ”）），
此.ComputildRestoryed（），
map（（数据：any）=>/*执行显示内容所需的任何操作（如格式化）*/）；
const outFormData$=this.myService.CommonFormObservable
.烟斗(
过滤器（（数据：任意）=>（data.Type==“DayData”和&data.DataType==“out”和&data.MessageKind==“READ”）），
此.ComputildRestoryed（），
map（（数据：any）=>/*执行显示内容所需的任何操作（如格式化）*/）；

在模板中：

{{entryFormData$| async}
{{outFormData$| async}

async
管道可以在任何地方使用，包括
ngIf
、
ngFor
等。
如果您需要在几个地方的值，您可以考虑这样做，以避免多次使用管道：

<ng-container *nIf="{{ entryFormData$ | async as entryFormData }}"
  <div>{{ entryFormData.foo }}</div>
  <div>{{ entryFormData.bar }}</div>
</ng-container>