web-dev-qa-db-ja.com

Ionic 4 componentPropsを受け取るにはどうすればよいですか？

Ionic 4で、modalControllerを使用してモーダルを開こうとしています。モーダルを開いてcomponentPropsを送信できますが、これらのプロパティを受け取る方法がわからない。

モーダルコンポーネントを開く方法は次のとおりです。

async showUpsert() {
  this.modal = await this.modalController.create({
    component:UpsertComponent,
    componentProps: {test: "123"}
  });
  return await this.modal.present();
}

私の質問です。実際のモーダルでは、どのようにしてtest: "123"を変数に入れますか？

ionic-frameworkionic4
11
ntgCleaner

これらの値は、必要なコンポーネントの入力コンポーネントインタラクションで取得できます。次に例を示します。

import { Component } from '@angular/core';
import { ModalController } from '@ionic/angular';
import { TestComponent } from '../test/test.component';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss']
})
export class HomePage {
  constructor(public modalController: ModalController){}
  async presentModal() {
    const modal = await this.modalController.create({
      component: TestComponent,
      componentProps: { value: 123, otherValue: 234 }
    });
    return await modal.present();
  }
}

入力付きのモーダルコンポーネントでは、次のパラメーターを使用できます。

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.scss']
})
export class TestComponent implements OnInit {
  @Input("value") value;
  @Input() otherValue;
  constructor() { }

  ngOnInit() {
    //print 123
    console.log(this.value);
    //print 234
    console.log(this.otherValue);
  }
}
17
Sergio Escudero

Navparamsを使用して、componentPropsの値を取得することもできます。

import { CommentModalPage } from '../comment-modal/comment-modal.page';
import { ModalController, IonContent } from '@ionic/angular';


constructor(public modalCtrl : ModalController) {  }

  async commentModal() {
      const modal = await this.modalCtrl.create({
        component: CommentModalPage,

        componentProps: { value: 'data'}
      });
      return await modal.present();
   }

あなたのcommentModalPageでは、navpramsをインポートし、そこから値を取得する必要があります。

import { NavParams} from '@ionic/angular';

constructor(public navParams : NavParams) {  

              console.log(this.navParams.get('value'));

            }
1
Tahseen Quraishi