Angular 7 Singleton Service 在两个组件之间进行通信答案

【问题标题】：Angular 7 Singleton Service To Communicate between two componentsAngular 7 Singleton Service 在两个组件之间进行通信
【发布时间】：2019-06-23 01:53:32
【问题描述】：

我有两个组件和一个服务。我想使用该服务来存储一个共同的价值。 StripeComponent 设置服务中的值。我收到以下错误：

无法读取未定义的属性“setAddress”

这是我的组件：

import { Component, ViewChild, OnInit } from '@angular/core'
import { NgForm } from '@angular/forms'

import { Address } from '../_models/address'
import { Observable } from 'rxjs';
import { ConfigService } from '../_services/config.service';

declare var Stripe;
@Component({
  selector: 'app-stripe',
  templateUrl: './stripe.component.html',
  styleUrls: ['./stripe.component.css'],
  providers: [ConfigService]
})
export class StripeComponent implements OnInit {
  public address = 
    new Address(
  {
    name:"",
    address_city: "",
    address_line1: "",
    address_line2: "",
    address_state: "",
    address_zip: "",
    address_country: ""
  }
)
configService: ConfigService 

  constructor() {         
   }

  ngOnInit(){
  // create observable address$
    this.address$.subscribe( (address: Address) => { 
    console.log(address); }) ;

      this.configService.setAddress(this.address); <-- error here

  } 

}

这是我的服务：

import { Injectable } from '@angular/core'
import { Address }from '../_models/address';

@Injectable({
  providedIn: 'root'
})
export class ConfigService {

  constructor() { }

  private config : Address;
  // set the address from stripe component
    setAddress(value) {
      this.config = value;
    }

  public getAddress() {
          return this.config;
  }

}

【问题讨论】：

configService 的值没有在任何地方设置，所以它默认为未定义。如果你想要 Angular 来提供它，你将不得不使用构造函数注入。

标签： angular typescript dependency-injection angular7

【解决方案1】：

您需要将ConfigService 注入StripeComponent 的构造函数，例如

export class StripeComponent implements OnInit {
    constructor(private configService: ConfigService) {}
}

How to use create and consume services in Angular

【讨论】：

【解决方案2】：

当您将 ConfigService 声明为“可注入”(@Injectable) 时，您必须在构造函数中注入：

constructor(private configService: ConfigService) {}

【讨论】：