typescript - Angular 7 Singletontjänst för att kommunicera mellan två komponenter
Jag har två komponenter och en tjänst. Jag vill använda tjänsten för att lagra ett gemensamt värde. StripeComponent sätter värdet i tjänsten. Jag får följande fel:
Kan inte läsa egenskapen 'setAddress' av undefined
Här är min komponent:
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
}
}
Här är min tjänst:
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;
}
}
Svar #1
Du behöver injicera ConfigService i konstruktören av StripeComponent, till exempel
export class StripeComponent implements OnInit {
constructor(private configService: ConfigService) {}
}
Hur man skapar och använder tjänster i Angular
Svar #2
Eftersom du deklarerade din ConfigService som "injicerbar" (@Injectable) måste du injicera den i din konstruktor:
constructor(private configService: ConfigService) {}
