Angular 5- 在兄弟组件之间传递数据以同时使用
创始人
2024-10-15 22:00:48
0

在Angular 5中,可以使用服务(service)来在兄弟组件之间传递数据。以下是一个示例:

  1. 创建一个名为data.service.ts的服务文件,并在其中定义一个名为data的可观察对象。该对象将用于存储要在兄弟组件之间传递的数据。
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable()
export class DataService {
  private data = new BehaviorSubject(''); // 初始化一个空字符串

  getData() {
    return this.data.asObservable();
  }

  setData(newData: string) {
    this.data.next(newData);
  }
}
  1. 在需要共享数据的发送组件(发送数据的组件)中,注入DataService服务,并使用setData()方法将数据发送给兄弟组件。
import { Component } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-sender',
  template: `
    
    
  `
})
export class SenderComponent {
  message = '';

  constructor(private dataService: DataService) {}

  sendMessage() {
    this.dataService.setData(this.message);
  }
}
  1. 在接收数据的组件中,也注入DataService服务,并使用getData()方法来订阅数据的变化。
import { Component } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-receiver',
  template: `
    

接收到的消息: {{ receivedMessage }}

` }) export class ReceiverComponent { receivedMessage = ''; constructor(private dataService: DataService) {} ngOnInit() { this.dataService.getData().subscribe(message => { this.receivedMessage = message; }); } }
  1. 在父组件中,将发送组件和接收组件添加到模板中。


现在,当在发送组件中输入文本并点击发送按钮时,接收组件将接收到发送的消息,并将其显示在页面上。

请注意,在使用这种方法时,需要将DataService服务添加到模块的providers数组中,以使其成为全局可用的服务。

希望以上解决方法能够帮助到您!

相关内容

热门资讯

透视有挂!wepoker怎么看... 透视有挂!wepoker怎么看牌型(透视)淘宝买wepoker透视有用吗,教程大纲(有挂方法)-哔哩...
wepoker私人局有透视吗!... wepoker私人局有透视吗!约局吧德州真的有透视挂吗(透视)教程-本来关于有挂1)约局吧德州真的有...
透视透视!wepoker有透视... 透视透视!wepoker有透视功能吗(透视)拱趴大菠萝万能挂图解,教程课程(有挂分析)-哔哩哔哩1、...
wepoker一直输的号能继续... wepoker一直输的号能继续打吗!拱趴游戏破解器(透视)教程-总是揭露真的是有挂wepoker一直...
透视科普!wepoker有人用... 透视科普!wepoker有人用过吗(透视)拱趴大菠萝挂怎么安装,教程方式(有挂方针)-哔哩哔哩该软件...
pokemomo辅助软件!we... pokemomo辅助软件!wepoker有透视功能吗(透视)神器-真是揭露是真的挂1)wepoker...
透视开挂!哈糖大菠萝助手(透视... 透视开挂!哈糖大菠萝助手(透视)德普之星透视辅助软件下载,教程攻略(有挂教程)-哔哩哔哩1、很好的工...
wejoker透视方法!菠萝辅... wejoker透视方法!菠萝辅助器免费版的特点(透视)工具-一直普及有挂1、菠萝辅助器免费版的特点有...
透视推荐!aapoker怎么开... 透视推荐!aapoker怎么开辅助器(透视)wpk德州局透视,教程阶段(今日头条)-哔哩哔哩1、aa...
德州圈脚本!hhpoker可以... 德州圈脚本!hhpoker可以控制吗(透视)教程-一贯解迷是真的挂1、在hhpoker可以控制吗插件...