Angular 两个组件之间的数据共享
当从creditcardcomponent向存储该值的config.service中的函数getAddress()发出请求时,我没有获得预期的Address对象值。我得到的是初始值,而不是更新后的值。这是config.serviceAngular 两个组件之间的数据共享,angular,Angular,当从creditcardcomponent向存储该值的config.service中的函数getAddress()发出请求时,我没有获得预期的Address对象值。我得到的是初始值,而不是更新后的值。这是config.service import { Injectable, Optional } from '@angular/core'; import { Address }from '../_models/address'; import { config } from 'rxjs';
import { Injectable, Optional } from '@angular/core';
import { Address }from '../_models/address';
import { config } from 'rxjs';
export class AddressServiceConfig {
addressConfig =
new Address(
{
name:"",
address_city: "",
address_line1: "",
address_line2: "",
address_state: "",
address_zip: "",
address_country: ""
}
)
constructor(@Optional() config: ConfigService) {
this.addressConfig = config._addressConfig;
}
}
@Injectable()
export class ConfigService {
public _addressConfig =
new Address(
{
name:"",
address_city: "",
address_line1: "",
address_line2: "",
address_state: "",
address_zip: "",
address_country: ""
}
)
constructor(@Optional() config: AddressServiceConfig) {
if (config) { this._addressConfig = config.addressConfig; }
}
// set the address from stripe component
setAddress(value) {
this._addressConfig = value;
console.log('set address is ', this._addressConfig);
}
getAddress():Address {
// get the address to the creditcard component
console.log('get address is ', this._addressConfig);
return this._addressConfig;
}
}
这是creditcardComponent:
import { Component, OnInit, ViewChild, Input } from '@angular/core'
import { StripeScriptTag, StripeToken } from "stripe-angular"
import { environment } from '../environments/environment'
import { NgForm } from '@angular/forms'
import { Observable } from 'rxjs'
import { Address } from '../_models/address'
import { CreditCardService } from '../_services/creditcard.service'
import { ConfigService } from '../_services/config.service'
declare var Stripe;
@Component({
selector: 'app-creditcard',
templateUrl: './creditcard.component.html',
styleUrls: ['./creditcard.component.css']
})
export class CreditCardComponent implements OnInit {
public ccAddress: Address;
extraData$: Observable<Address>;
token:StripeToken;
error:Error;
Stripe: any;
@ViewChild("yourForm")
yourForm: NgForm;
private publishableKey:string = `${environment.stripeKey}`;
constructor(private creditCardService: CreditCardService,
public stripeScriptTag: StripeScriptTag,
public configService: ConfigService) {
this.stripeScriptTag.setPublishableKey( this.publishableKey );
}
ngOnInit(){
this.getAddress();
console.log("From configService", this.ccAddress);
}
getAddress(): void {
this.ccAddress = this.configService.getAddress();
console.log('this.ccAddress is ', this.ccAddress);
}
我在stripe组件中调用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']
})
export class StripeComponent implements OnInit {
// totally right to make address instance of Address class
public address =
new Address(
{
name:"",
address_city: "",
address_line1: "",
address_line2: "",
address_state: "",
address_zip: "",
address_country: ""
}
)
// create observable
address$ = new Observable((observer) => {
// observable execution
observer.next(this.address )
observer.complete()
})
Stripe: any;
@ViewChild("yourForm")
yourForm: NgForm;
constructor(private configService: ConfigService) { }
ngOnInit(){
// create observable address$
//which will log the address when the observable gets a value.
this.address$.subscribe( (address: Address) => {
console.log(address); }) ;
}
onSubmitAddress(){
this.address$.subscribe( (address: Address) => {
this.address = address;
console.log('here is the onSubmit address', this.address); })
this.configService.setAddress(this.address); <-- setAddress()
}
}
似乎只有在ngOnInit中调用了
getAddress
?如果是这样,它将不知道在值更改时更新
ngOnInit(){
this.getAddress();
console.log("From configService", this.ccAddress);
}
getAddress(): void {
this.ccAddress = this.configService.getAddress();
console.log('this.ccAddress is ', this.ccAddress);
}
尝试将简单的ccAddress
属性更改为getter。然后它会在每次更改时重新注册它
get ccAddress(): Address {
return this.configService.getAddress();
}
你在哪里呼叫
setAddress
?@Phix我添加了发送setAddress的代码。我还为app.module.ts添加了代码。我想知道CoreModule是否不正确。我希望这个值是最新的地址。有没有办法在stackblitz中做一个简化的版本(足以演示这个问题)?
ngOnInit(){
this.getAddress();
console.log("From configService", this.ccAddress);
}
getAddress(): void {
this.ccAddress = this.configService.getAddress();
console.log('this.ccAddress is ', this.ccAddress);
}
get ccAddress(): Address {
return this.configService.getAddress();
}