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) {
      }
    
  • 相关阅读:
    吉哥系列故事――恨7不成妻
    K
    F
    树状数组
    34.在排序数组中查找元素的第一个和最后一个位置--二分查找
    CSS选择器及其权重
    CSS布局 圣杯和双飞翼
    983. 最低票价 -- 动态规划
    合并k个排序链表 二分
    面试题 16.03. 交点
  • 原文地址:https://www.cnblogs.com/Godfunc/p/9848713.html
Copyright © 2011-2022 走看看