发表在

角训练

RxJs主题:教程

如果你有一些使用Angular的经验,你可能会熟悉可见从RxJs。

本文将关注一种特定的可观察对象,称为Subject。受试者本身是可观察的,但使他们与众不同的是,他们也是观察者。

这是什么意思?这意味着a主体可以发射数据,在具备订阅功能的基础上。让我们来看一个例子:

主题=主题<字符串> ();//我们订阅了这个主题
Subject.subscribe ((data) => {
控制台. log (“订阅用户已获得数据>>>>>”+数据);
});

//我们使用subject来释放数据
subject.next (“尤里卡”);

//控制台结果:用户已获得数据>>>>>尤里卡

常规可观察对象没有next ()方法作为常规的观察对象并不是观察对象。这就是学科第一超能力:数据发射

Angular认证考试

主题是多播

主题的第二个超级功能是它们支持多个订阅.换句话说,它们是多播。

主题类似于eventemitter:它们维护许多侦听器的注册表。

主题=主题<字符串> ();

Subject.subscribe ((data) => {
控制台. log (“用户1获得数据>>>>>”+数据);
});
Subject.subscribe ((data) => {
控制台. log (“用户2获得数据>>>>>”+数据);
});

subject.next (“尤里卡”);

//控制台结果:
//用户1得到数据>>>>>尤里卡
//用户2获得数据>>>>>尤里卡

因此,您可以在服务中使用Subject来获取一些数据,并将结果发送给订阅了该Subject的所有组件。

不过,有一件事我要建议:不要将Subject对象直接暴露给组件。相反,返回它的一个良好的老Observable版本:

//不要这样做,否则你的订阅者将能够“混乱”你的//主题
getData(): Subject {
返回这.subject;
//这样做:
getData(): Observable {
返回这.subject.asObservable ();

以上将使您的代码更加安全,并将防止糟糕的编码实践。

行为的对象

行为主体是关于主体的另一个很酷的东西。当你订阅一个行为主题时,它会给你最后发射值马上。

想象一下,你订阅了一本杂志,马上就收到了最新出版的一期。那不是很棒吗?欢迎来到行为学科的世界!

//行为主体需要第一个值
主题=BehaviorSubject <字符串> (“第一价值”);

subject.asObservable().subscribe((data) => {
控制台. log (“第一个用户获得数据>>>>>”+数据);
});

subject.next (“第二价值”

//控制台结果:
//第一个用户获得的数据>>>>>第一个值
//第一个订阅用户获得的数据>>>>>第二个值

对于行为主题,不管你什么时候订阅,你总是能马上得到最新的值,这非常有用。

现在,如果我们想要的不仅仅是最新发出的值怎么办?

重播科目

重放主题保留一定数量的历史值,以便这些值可以重放给新的订阅者。

//我们告诉ReplaySubject应该在// history中保留多少值主题=ReplaySubject <字符串> (2);

subject.next (“第一价值”);
subject.next (“第二价值”);
subject.next (“第三个价值”);

subject.asObservable().subscribe((data) => {
控制台. log (“第一个用户获得数据>>>>>”+数据);
});

subject.next (“第四价值”);

/ /控制台的结果:
//第一个订阅用户获得的数据>>>>>第二个值
//第一个订阅用户获得数据>>>>>第三个值
//第一个订阅用户获得数据>>>>>第四个值

在上面的例子中,我的Replay Subject保留了两个值的历史长度。因此,一旦出现新的订阅服务器,它就会得到最后两个值,以及稍后出现的任何新值。

正如你所看到的,subject是一个非常有趣的主题(这很简单!)我们只是触及了他们能完成的事情的表面,如果你想要一篇深入了解他们能做什么的后续文章,请告诉我。

我叫betway必威滚球.我是谷歌的Angular开发专家,也是在角训练在那里我帮助web开发团队学习并熟练使用Angular。看看我们@AngularTraining

如果你喜欢这篇文章,请鼓掌或分享。你的帮助我永远感激。

使用Medium应用程序

一个写着“在应用商店下载”的按钮,如果点击它将引导你进入iOS应用商店
一个写着“开始吧,谷歌Play”的按钮,如果点击它,就会引导你进入谷歌Play商店
Baidu
map