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数组中,以使其成为全局可用的服务。

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

相关内容

热门资讯

透视推荐!福建大菠萝万能辅助器... 透视推荐!福建大菠萝万能辅助器(透视)wepokerplus到底是挂了吗,教程模块(有挂技术)-哔哩...
透视解迷!uupoker有透视... 透视解迷!uupoker有透视吗(透视)德普之星透视,教程妙招(有挂教学)-哔哩哔哩1、透视解迷!u...
透视开挂!wepokerplu... 透视开挂!wepokerplus透视脚本免费(透视)德普辅助软件,教程手册(真实有挂)-哔哩哔哩1、...
透视解谜!德普之星辅助器app... 透视解谜!德普之星辅助器app(透视)拱趴大菠萝开挂方法,教程技法(证实有挂)-哔哩哔哩1)拱趴大菠...
透视解迷!pokerrrr2辅... 透视解迷!pokerrrr2辅助(透视)哈糖大菠萝攻略,教程方案(有挂秘诀)-哔哩哔哩1、哈糖大菠萝...
透视解谜!WePoKer辅助器... 透视解谜!WePoKer辅助器(透视)wepoker私人局俱乐部辅助,教程积累(有挂规律)-哔哩哔哩...
透视开挂!sohoo竞技联盟辅... 透视开挂!sohoo竞技联盟辅助器(透视)德州局透视脚本免费版下载手机版,教程妙计(有挂神器)-哔哩...
透视揭幕!aapoker能控制... 透视揭幕!aapoker能控制牌吗(透视)epoker底牌透视,教程资料(确实有挂)-哔哩哔哩1、玩...
透视分享!wepoker有辅助... 您好,wepoker有辅助器吗这款游戏可以开挂的,确实是有挂的,需要了解加去威信【485275054...
透视推荐!wepoker软件辅... 透视推荐!wepoker软件辅助程序(透视)wepoker软件辅助程序,教程烘培(有挂解密)-哔哩哔...