将变量从一个组件中的服务访问到Angular 7中的另一个组件

在Angular 7中，可以通过服务（Service）来实现将变量从一个组件中访问到另一个组件。服务是一个可注入的类，用于共享数据和功能。下面是一个完善且全面的答案：

在Angular 7中，可以通过服务（Service）来实现将变量从一个组件中访问到另一个组件。服务是一个可注入的类，用于共享数据和功能。以下是实现这一目标的步骤：

创建一个服务：
- 创建一个新的文件，命名为data.service.ts。
- 在该文件中，导入Injectable装饰器和BehaviorSubject类。
- 创建一个类DataService，并使用Injectable装饰器进行注解。
- 在DataService类中，创建一个BehaviorSubject类型的私有变量，用于存储要共享的数据。
- 创建一个公共方法setData()，用于更新共享数据。
- 创建一个公共方法getData()，用于获取共享数据。

在发送数据的组件中使用服务：
- 在发送数据的组件中，导入DataService。
- 在构造函数中注入DataService。
- 使用setData()方法将数据存储到服务中。
在接收数据的组件中使用服务：
- 在接收数据的组件中，导入DataService。
- 在构造函数中注入DataService。
- 使用getData()方法从服务中获取数据。

下面是一个示例代码：

data.service.ts:

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  private sharedData = new BehaviorSubject<string>('');

  setData(data: string) {
    this.sharedData.next(data);
  }

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

sender.component.ts:

import { Component } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-sender',
  template: `
    <button (click)="sendData()">Send Data</button>
  `
})
export class SenderComponent {
  constructor(private dataService: DataService) {}

  sendData() {
    const data = 'Hello from SenderComponent';
    this.dataService.setData(data);
  }
}

receiver.component.ts:

import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-receiver',
  template: `
    <div>{{ receivedData }}</div>
  `
})
export class ReceiverComponent implements OnInit {
  receivedData: string;

  constructor(private dataService: DataService) {}

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

在上述示例中，DataService服务被用于在SenderComponent组件中发送数据，并在ReceiverComponent组件中接收数据。通过调用setData()方法，数据被存储在服务中，并通过调用getData()方法从服务中获取数据。

推荐的腾讯云相关产品：腾讯云云服务器（CVM）和腾讯云云数据库MySQL版。腾讯云云服务器提供可靠的计算能力，用于部署和运行应用程序。腾讯云云数据库MySQL版提供高性能、可扩展的关系型数据库服务，用于存储和管理数据。

腾讯云云服务器产品介绍链接地址：https://cloud.tencent.com/product/cvm 腾讯云云数据库MySQL版产品介绍链接地址：https://cloud.tencent.com/product/cdb_mysql