Angular:将参数传递给另一个组件

时间:2018-02-13 09:17:25

标签: angular typescript

我坚持使用Angular2,我想将参数从产品页面(例如:产品ID)传递到付款页面,这是我尝试过的到目前为止:

enter image description here

  

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>

但我总是收到此错误消息:

enter image description here

知道我做错了什么?

  

这是我的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,那么我收到此错误消息:

enter image description here

3 个答案:

答案 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)

&#13;
&#13;
///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;
&#13;
&#13;

  

以3种不同的方式共享组件之间的数据。使用服务是最好的。   Referral Url