首页 › Angular论坛 › Angular 创建 可观察对象（Observable）

嫂子哥 發表於 2020-5-20 12:37:00

Angular 创建 可观察对象（Observable）

<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">message.service.ts

</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 创建可观察对象</span>
import { Injectable } <span style="color: rgba(0, 0, 255, 1)">from</span> <span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(128, 0, 0, 1)">@angular/core</span><span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(0, 0, 0, 1)">;
import {Observable} </span><span style="color: rgba(0, 0, 255, 1)">from</span> <span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(128, 0, 0, 1)">rxjs</span><span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(0, 0, 0, 1)">;
import { Subject } </span><span style="color: rgba(0, 0, 255, 1)">from</span> <span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(128, 0, 0, 1)">rxjs</span><span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(0, 0, 0, 1)">;

@Injectable()
export </span><span style="color: rgba(0, 0, 255, 1)">class</span><span style="color: rgba(0, 0, 0, 1)"> MessageService {
    </span><span style="color: rgba(0, 0, 255, 1)">private</span> subject = <span style="color: rgba(0, 0, 255, 1)">new</span> Subject&lt;any&gt;<span style="color: rgba(0, 0, 0, 1)">();

    sendMessage(message: </span><span style="color: rgba(0, 0, 255, 1)">string</span><span style="color: rgba(0, 0, 0, 1)">) {
      </span><span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">.subject.next({ text: message });
    }

    clearMessage() {
      </span><span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">.subject.next();
    }

    getMessage(): Observable</span>&lt;any&gt;<span style="color: rgba(0, 0, 0, 1)"> {
      </span><span style="color: rgba(0, 0, 255, 1)">return</span> <span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">.subject.asObservable();
    }
}</span></pre>
</div>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">home.component.ts

import { Component } </span><span style="color: rgba(0, 0, 255, 1)">from</span> <span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(128, 0, 0, 1)">@angular/core</span><span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(0, 0, 0, 1)">;
import { MessageService } </span><span style="color: rgba(0, 0, 255, 1)">from</span> <span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(128, 0, 0, 1)">src/app/service/single.service</span><span style="color: rgba(128, 0, 0, 1)">'</span></pre>
<div>　import&nbsp;{&nbsp;Subscription&nbsp;}&nbsp;from&nbsp;'rxjs';</div>
<pre><span style="color: rgba(0, 0, 0, 1)">
@Component({
    templateUrl: </span><span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(128, 0, 0, 1)">home.component.html</span><span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(0, 0, 0, 1)">
})

export </span><span style="color: rgba(0, 0, 255, 1)">class</span><span style="color: rgba(0, 0, 0, 1)"> HomeComponent </span>OnDestroy</pre>
<pre><span style="color: rgba(0, 0, 0, 1)">{</span></pre>
<div>&nbsp;&nbsp;&nbsp;&nbsp;　　subscription:&nbsp;Subscription;</div>
<pre><span style="color: rgba(0, 0, 0, 1)">    constructor(</span><span style="color: rgba(0, 0, 255, 1)">private</span><span style="color: rgba(0, 0, 0, 1)"> messageService: MessageService) {
    　　</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 创建观察者</span>
    　　<span style="color: rgba(0, 0, 255, 1)">this</span>.subscription = <span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">.messageService.getMessage()
            .subscribe(message </span>=&gt; { console.log(<span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(128, 0, 0, 1)">message</span><span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(0, 0, 0, 1)">, message) });
    　　</span><span style="color: rgba(0, 0, 255, 1)">this</span>.sendMessage() <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 发短信</span>
　　<span style="color: rgba(0, 0, 0, 1)">}
   
    sendMessage(): </span><span style="color: rgba(0, 0, 255, 1)">void</span> { <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 发送消息</span>
      <span style="color: rgba(0, 0, 255, 1)">this</span>.messageService.sendMessage(<span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(128, 0, 0, 1)">Message from Home Component to App Component!</span><span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(0, 0, 0, 1)">);
    }

    clearMessage(): </span><span style="color: rgba(0, 0, 255, 1)">void</span> { <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 清除消息</span>
      <span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">.messageService.clearMessage();
    }<br><br></span></pre>
<div>
<div>　　　ngOnDestroy()&nbsp;{</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;关闭监听</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.subscription.unsubscribe();</div>
<div>&nbsp;&nbsp;&nbsp;&nbsp;}</div>
</div>
<pre><span style="color: rgba(0, 0, 0, 1)">
}    </span></pre>
</div>
<p>&nbsp;</p><br><br>
来源：https://www.cnblogs.com/lvsk/p/12922914.html

查看完整版本: Angular 创建 可观察对象（Observable）