違いはなんですか？
あなたの例でわかるように、主な違いはソースコードの読みやすさを改善することです。あなたの例には2つの関数しかありませんが、関数が12個あると想像してみてください。その後、それは次のようになります
function1().function2().function3().function4()
特に関数の内部を埋めているときは、本当に醜くなり、読みにくくなります。その上、Visual Studioコードのような特定のエディターでは、140行を超える長さは許可されていません。しかし、それが次のようになる場合。
Observable.pipe(
function1(),
function2(),
function3(),
function4()
)
これにより、読みやすさが大幅に向上します。
違いがないのに、なぜ機能パイプが存在するのですか？
PIPE（）関数の目的は、取得するすべての関数をまとめて、observableを返すことです。最初はobservableを取り、次にそのobservableはpipe（）関数全体で、その内部で使用される各関数によって使用されます。
最初の関数はオブザーバブルを取得して処理し、その値を変更して次の関数に渡します。次に、次の関数は最初の関数のオブザーバブルの出力を取得して処理し、次の関数に渡します。その後、すべての関数が実行されるまで続行されます。 pipe（）関数内でそのオブザーバブルを使用すると、最終的に処理されたオブザーバブルが得られます。最後に、subscribe（）関数を使用してobservableを実行し、そこから値を抽出できます。元のオブザーバブルの値は変更されないことを忘れないでください。
これらの関数に異なるインポートが必要なのはなぜですか？
インポートは、関数がrxjsパッケージのどこで指定されているかによって異なります。こんなふうになります。すべてのモジュールはAngularのnode_modulesフォルダーに保存されます。「モジュール」から{クラス}をインポートします。
例として次のコードを取り上げましょう。私はそれをstackblitzで書いたところです。したがって、何も自動的に生成されたり、他の場所からコピーされたりすることはありません。rxjsのドキュメントに記載されている内容をコピーして、それを読むことができるのに意味がありません。ドキュメントを理解していなかったので、ここでこの質問をしたと思います。
- それぞれのモジュールからインポートされたパイプ、監視可能、のマップクラスがあります。
- クラスの本体では、コードに示されているように、Pipe（）関数を使用しました。
Of（）関数は、サブスクライブ時に順番に番号を発行するobservableを返します。
Observableはまだサブスクライブされていません。
Observable.pipe（）のように使用した場合、pipe（）関数は指定されたObservableを入力として使用します。
最初の関数map（）関数は、そのObservableを使用して処理し、処理されたObservableをpipe（）関数に戻します。
次に、処理されたObservableは、存在する場合は次の関数に渡されます。
そして、すべての関数がObservableを処理するまで、そのように続きます。
最後に、Observableがpipe（）関数によって変数に返されます。次の例では、そのobsです。
Observableにあるのは、オブザーバーがサブスクライブしない限り、値を出力しないということです。そこで、subscribe（）関数を使用して、このObservableをサブスクライブし、サブスクライブするとすぐにサブスクライブしました。of（）関数は値の出力を開始し、pipe（）関数を介して処理され、最後に最終結果を取得します。たとえば、1はof（）関数から取得され、1はmap（）関数に1が追加されます。そして戻ってきました。その値は、subscribe（function（argument）{}）関数内の引数として取得できます。
印刷したい場合は、
subscribe( function (argument) {
console.log(argument)
}
)
import { Component, OnInit } from '@angular/core';
import { pipe } from 'rxjs';
import { Observable, of } from 'rxjs';
import { map } from 'rxjs/operators';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
obs = of(1,2,3).pipe(
map(x => x + 1),
);
constructor() { }
ngOnInit(){
this.obs.subscribe(value => console.log(value))
}
}
https://stackblitz.com/edit/angular-ivy-plifkg
pipe()、あなたが作成することを事業者に渡してみましょうか？