我坚持使用Angular2,我想将参数从产品页面(例如:产品ID)传递到付款页面,这是我尝试过的到目前为止:
payment.html:
Message: {{message}}
<page-products></page-products>
payment.ts:
import { Component, ViewChild, AfterViewInit} from '@angular/core';
import { ProductsPage } from "../../products/products";
@IonicPage()
@Component({
selector: 'page-payment',
templateUrl: 'payment.html'
})
export class PaymentPage implements AfterViewInit {
@ViewChild(ProductsPage) child;
constructor(public navCtrl: NavController) {}
message:string;
ngAfterViewInit() {
this.message = this.child.message
}
}
products.ts:
import { Component} from '@angular/core';
import { IonicPage, NavController } from 'ionic-angular';
@IonicPage()
@Component({
selector: 'page-products',
templateUrl: 'products.html',
})
export class ProductsPage {
message: string = "Hola Mundo!"
constructor(public navCtrl: NavController) {}
goToPayment() {
this.navCtrl.setRoot('PaymentPage');
}
}
product.html:
<button ion-button (click)="goToPayment()">pay</button>
但我总是收到此错误消息:
知道我做错了什么?
这是我的payment.module.ts:
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { ComponentsModule } from '../../../components/components.module';
import { PaymentPage } from './payment';
import { ProductsPage } from '../../products/products';
@NgModule({
declarations: [
PaymentPage, ProductsPage <-- if I add here ProductsPage, then new error (see under)
],
imports: [
IonicPageModule.forChild(PaymentPage),
ComponentsModule
]
})
export class PaymentPageModule {}
和products.module.ts:
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { ProductsPage } from './products';
import { ComponentsModule } from '../../components/components.module';
@NgModule({
declarations: [
ProductsPage
],
imports: [
IonicPageModule.forChild(ProductsPage),
ComponentsModule
]
})
export class ProductsPageModule {}
如果我声明如上所述的ProductsPage,那么我收到此错误消息:
答案 0 :(得分:1)
要在没有层次关系的组件之间传递参数,您应该使用服务。为此,首先要创建服务:
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
@Injectable()
export class MyService {
private messageSource = new BehaviorSubject<type_of_the_message>(message);
currentMessage = this.messageSource.asObservable();
constructor() { }
sendMessage(message: type_of_the_message) {
this.messageSource.next(message);
}
}
然后在发件人组件中:
import { Component, OnInit } from '@angular/core';
import { MyService } from 'pathToService/MyService.service';
@Component({
selector: 'sender',
templateUrl: 'senderTemplate',
styleUrls: ['senderStyles']
})
export class SenderComponent implements OnInit {
private message: type_of_the_message;
constructor(private myService: MyService) {}
ngOnInit() {
this.myService.currentMessage.subscribe(message => this.message = message);
}
sendMessage() {
this.myService.sendMessage(!this.message);
}
}
最后在接收器组件中:
import { Component, OnInit } from '@angular/core';
import { MyService } from 'pathToService/MyService.service';
@Component({
selector: 'receiver',
templateUrl: 'receiverTemplate',
styleUrls: ['receiverStyles']
})
export class ReceiverComponent implements OnInit {
private message: boolean;
constructor(private myService: MyService) {}
ngOnInit() {
this.myService.currentMessage.subscribe(message => this.message = message);
}
}
答案 1 :(得分:0)
至于你得到的错误,这是因为你没有在模块中声明你的ProductsPage
组件。它似乎是适当的地方,在products.module.ts
内(在元数据对象中的声明数组内)。
但是关于从子组件传递数据的问题,有更好的方法可以做到这一点。一个是为子组件使用Output
属性,并在父模板中为其分配方法,并在需要时发出值...
答案 2 :(得分:0)
///payments.ts
import { Component, ViewChild, AfterViewInit} from '@angular/core';
import { ProductsPage } from "../../products/products";
import { OnInit } from "@angular/core/src/metadata/lifecycle_hooks";
@IonicPage()
@Component({
selector: 'page-payment',
templateUrl: 'payment.html'
})
export class PaymentPage implements AfterViewInit, OnInit {
@ViewChild(ProductsPage) child;
constructor(public navCtrl: NavController, public commonService : CommonService) {}
message:string;
ngOnInit() {
this.commonService.payment.subscribe(data => {
this.message = data;
});
}
ngAfterViewInit() {
this.message = this.child.message
}
}
/// products.ts
import { Component} from '@angular/core';
import { IonicPage, NavController } from 'ionic-angular';
@IonicPage()
@Component({
selector: 'page-products',
templateUrl: 'products.html',
})
export class ProductsPage {
message: string = "Hola Mundo!"
constructor(public navCtrl: NavController, public commonService : CommonService) {}
goToPayment() {
commonService.goToPayment(message);
}
}
///commonService
@Injectable()
export class CommonService {
@Output() payment: EventEmitter<String> = new EventEmitter();
goToPayment(message) {
this.payment.emit(message);
this.navCtrl.setRoot('PaymentPage');
}
}
&#13;
以3种不同的方式共享组件之间的数据。使用服务是最好的。 Referral Url