zoukankan      html  css  js  c++  java
  • angular service 进行组件通信

    MessageService 代码如下

    import { Injectable } from '@angular/core';
    import { Subject } from 'rxjs';
    @Injectable({
      providedIn: 'root'
    })
    export class MessageService {
      private messageSource = new Subject<string>();
      message$ = this.messageSource.asObservable();
      messageAction(name: string) {
        this.messageSource.next(name);
      }
    }
    

    发送消息的组件 代码如下

    ts

    import { Component} from '@angular/core';
    import { MessageService } from '../service/message.service';
    @Component({
      selector: 'app-send',
      templateUrl: './send.component.html',
      styleUrls: ['./send.component.css']
    })
    export class SendComponent {
      constructor(private messageService: MessageService) { }
      sendMessage(action: string) {
        this.messageService.messageAction(action);
      }
    

    html

    <input #action>
    <button (click)="sendMessage(action.value)">action</button>
    

    接收消息的组件

    ts

    import { Component, OnInit, OnDestroy } from '@angular/core';
    import { MessageService } from './service/message.service';
    
    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    })
    export class AppComponent implements OnInit, OnDestroy {
      action: string;
      sub: Subscription;
      ngOnInit(): void {
        this.messageService.message$.subscribe(action => this.action = action);
      }
      ngOnDestroy(): void {
        this.sub.unsubscribe(); //不要忘记取消订阅
      }
      constructor(private messageService: MessageService) {
      }
    
  • 相关阅读:
    IntelliJ IDEA更新maven依赖包
    PHP运行出现Notice
    JetBrains CLion
    SQL中GROUP BY的使用
    LCA 总结
    HAProxy:第三方包及编译安装
    nginx之升级openssl及自定义nginx版本
    nginx之http反向代理多台服务器
    nginx之rewrite相关功能
    nginx之rewrite及防盗链
  • 原文地址:https://www.cnblogs.com/Godfunc/p/9848713.html
Copyright © 2011-2022 走看看