首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何将数据从订阅存储/设置到外部变量,并再次从Angular 7中的其他类读取数据

在Angular 7中,可以通过以下步骤将数据从订阅存储/设置到外部变量,并再次从其他类中读取数据:

  1. 创建一个服务(Service)来处理数据的订阅和存储。可以使用Angular的@Injectable装饰器将该服务标记为可注入的。
代码语言:txt
复制
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  private dataSubject: BehaviorSubject<any> = new BehaviorSubject<any>(null);
  public data$ = this.dataSubject.asObservable();

  setData(data: any) {
    this.dataSubject.next(data);
  }
}
  1. 在需要设置数据的组件中,注入DataService,并调用setData方法来设置数据。
代码语言:txt
复制
import { Component } from '@angular/core';
import { DataService } from 'path-to-data-service';

@Component({
  selector: 'app-source-component',
  template: `
    <button (click)="setData()">Set Data</button>
  `
})
export class SourceComponent {
  constructor(private dataService: DataService) {}

  setData() {
    const data = 'Hello, World!';
    this.dataService.setData(data);
  }
}
  1. 在需要读取数据的组件中,同样注入DataService,并订阅data$属性来获取数据。
代码语言:txt
复制
import { Component, OnInit } from '@angular/core';
import { DataService } from 'path-to-data-service';

@Component({
  selector: 'app-destination-component',
  template: `
    <p>Data: {{ data }}</p>
  `
})
export class DestinationComponent implements OnInit {
  data: any;

  constructor(private dataService: DataService) {}

  ngOnInit() {
    this.dataService.data$.subscribe(data => {
      this.data = data;
    });
  }
}

通过以上步骤,你可以将数据从订阅存储/设置到外部变量,并在Angular 7中的其他类中读取数据。这种方法适用于在不同组件之间共享数据,并实时更新数据的场景。

推荐的腾讯云相关产品:腾讯云云服务器(CVM)、腾讯云对象存储(COS)、腾讯云数据库(TencentDB)等。你可以访问腾讯云官方网站(https://cloud.tencent.com/)了解更多关于这些产品的详细信息和使用指南。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

领券