Angular 发布订阅
Angular 发布 订阅
2023-09-27 14:28:58 时间
创建service
import { Subject } from 'rxjs/Subject'; import { Observable } from 'rxjs/observable'; export class MessageService { private subject = new Subject<any>(); send(message: any) { this.subject.next(message); } get(): Observable<any> { return this.subject.asObservable(); } }
组件1 发布
import { Component, OnInit } from '@angular/core'; import { Subject } from 'rxjs/Subject'; import { MessageService } from '../../service/message.service'; @Component({ selector: 'app-video-demo-home', templateUrl: './video-demo-home.component.html', styleUrls: ['./video-demo-home.component.sass'] }) export class VideoDemoHomeComponent implements OnInit { private _clickPoint: Subject<any> = new Subject<any>(); public name = 'www'; constructor(public srv: MessageService) { } ngOnInit() { } clickBtn() { this.srv.send(this.name); } }
组件2 订阅
import { Component, OnInit } from '@angular/core'; import { MessageService } from '../../service/message.service'; @Component({ selector: 'app-subscribe-home', templateUrl: './subscribe-home.component.html', styleUrls: ['./subscribe-home.component.sass'] }) export class SubscribeHomeComponent implements OnInit { constructor(public srv: MessageService) { } public message = ''; ngOnInit() { this.srv.get().subscribe((result) => { console.log('111111111111111111'); this.message = result; console.log(this.message); }); } }
相关文章
- Angular CLI 使用教程指南参考
- 从Java角度理解Angular之入门篇:npm, yarn, Angular CLI
- Angular中的管道
- 微信新增图片、视频拖动一键发送功能;Google 称互联网的六成是重复内容;Angular 15 发布|极客头条
- Angular 复习与进阶系列 – Change Detection
- Angular 学习笔记 ( CDK - Accessibility )
- angular2 学习笔记 ( server-side rendering, angular universal, 服务端渲染 )
- Access-Control-Allow-Origin: Dealing with CORS Errors in Angular
- Angular引入控制器
- angular中的ng-bind-html指令和$sce服务
- Angular material mat-icon 资源参考_Connection
- Angular中的Error: [$resource:badcfg]错误如何解决之一种
- Angular JS路由插件ui.router源码解析